AngularFire Data Table

AngularFire Data Table.markdown

AngularFire Data Table

A Pen by 杨俊 on CodePen.

License.

index.html

<div ng-app="sampleApp" ng-controller="MealCtrl">
  <p>
    Search: <input ng-model="searchText"> Sort by:
    <select ng-model="orderBy">
      <option>from</option>
      <option>content</option>
      <option>timestamp</option>
    </select>
  </p>

  <ul class="chatbox">
    <!-- arrays are fully sortable and filterable -->
    <li ng-repeat="message in messages | orderBy:orderBy | filter:searchText">
      From : {{ message.from }} <br> Content : {{ message.content }} <br> Meal : {{message.number}} <br> Carbs : {{message.carbs}} <br> Sugar : {{message.sugar}} <br> Protein : {{message.protein}} <br> Fat : {{message.fats}} <br>
      <!-- delete a message using $remove -->
      <a href="" ng-click="messages.$remove(message)">Delete Me</a>
      <a href="" ng-click="messages.$edit(message)">Edit Me</a>
    </li>
  </ul>

  <form ng-submit="addMessage()">
    <input type="text" ng-model="message" placeholder="message" title="addToDB">
    <input type="text" ng-model="number" placeholder="number" title="addToDB">
    <input type="text" ng-model="carbs" placeholder="carbs" title="addToDB">
    <input type="text" ng-model="sugar" placeholder="sugar" title="addToDB">
    <input type="text" ng-model="protein" placeholder="protein" title="addToDB">
    <input type="text" ng-model="fat" placeholder="fat" title="addToDB">
    <input type="submit">
  </form>
  <br>
  <table class="table-fill">
    <thead>
      <tr>
        <th class="text-left">Meal</th>
        <th class="text-left">Carbs</th>
        <th class="text-left">Sugar</th>
        <th class="text-left">Fats</th>
        <th class="text-left">Protein</th>
      </tr>
    </thead>
    <tbody class="table-hover">
      <tr ng-repeat="message in messages">
        <td class="text-left">
          {{ message.number }}
        </td>
        <td class="text-left">
          {{ message.carbs }}
        </td>
        <td class="text-left">
          {{ message.sugar }}
        </td>
        <td class="text-left">
          {{ message.protein }}
        </td>
        <td class="text-left">
          {{ message.fats }}
        </td>

      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td class="text-left">
          Total
        </td>
        <td class="text-left">
          {{ carbValues }}
        </td>
        <td class="text-left">
        </td>
        <td class="text-left">
        </td>
        <td class="text-left">
        </td>
      </tr>
    </tfoot>
  </table>

</div>

script.js

var app = angular.module("sampleApp", ["firebase"]);

app.factory("mealMacros", ["$firebaseArray",
  function($firebaseArray) {
    //创建一个参考数据库，在那里我们将存储我们的数据
    var randomRoomId = Math.round(Math.random() * 100000000);
    var ref = new Firebase("https://codepen-chatapp.firebaseio.com/Macros/" + randomRoomId);

    return $firebaseArray(ref);
  }
]);

app.controller("MealCtrl", ["$scope", "mealMacros",
  function($scope, mealMacros) {
    $scope.user = "Guest " + Math.round(Math.random() * 100);

    $scope.messages = mealMacros;

    $scope.addMessage = function() {
      // $add on a synchronized array is like Array.push() except it saves to the database!
      $scope.messages.$add({
        from: $scope.user,
        content: $scope.message,
        carbs: $scope.carbs,
        sugar: $scope.sugar,
        protein: $scope.protein,
        fat: $scope.fat,
        timestamp: Firebase.ServerValue.TIMESTAMP
      });

      $scope.message = "";
    };

    // 如果消息是空的，添加一些有趣的东西！
    $scope.messages.$loaded(function() {
      if ($scope.messages.length === 0) {
        $scope.messages.$add({
          from: "John Doe",
          content: "I'm Alive!",
          number: "1",
          carbs: "200",
          sugar: "25",
          protein: "40",
          fats: "18",
          timestamp: Firebase.ServerValue.TIMESTAMP
        });
      }
    });
  }
]);

scripts

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>

style.css

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);

body {
  background-color: #E8DDCB;
  font-family: "Roboto", helvetica, arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
}
input[type="text"] {
  padding: 10px;
  border: none;
  border-bottom: solid 2px #c9c9c9;
  transition: border 0.3s;
}
input[type="text"]:focus,
input[type="text"].focus {
  border-bottom: solid 2px #969696;
  outline-width: 0;
}

div.table-title {
  display: block;
  margin: auto;
  max-width: 600px;
  padding:5px;
  width: 100%;
}

.table-title h3 {
   color: #fafafa;
   font-size: 30px;
   font-weight: 400;
   font-style:normal;
   font-family: "Roboto", helvetica, arial, sans-serif;
   text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
   text-transform:uppercase;
}


/*** Table Styles **/

.table-fill {
  background: white;
  border-radius:3px;
  border-collapse: collapse;
  height: 320px;
  margin: auto;
  max-width: 600px;
  padding:5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}
 
th {
  color:#D5DDE5;;
  background:#0C0336;
  border-bottom:4px solid #9ea7af;
  border-right: 1px solid #343a45;
  font-size:23px;
  font-weight: 100;
  padding:24px;
  text-align:left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align:middle;
}

th:first-child {
  border-top-left-radius:3px;
}
 
th:last-child {
  border-top-right-radius:3px;
  border-right:none;
}
  
tr {
  border-top: 1px solid #C1C3D1;
  border-bottom-: 1px solid #C1C3D1;
  color:#666B85;
  font-size:16px;
  font-weight:normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
tr:hover td {
  background:#0C0336;
  opacity: 0.9;
  color:#FFFFFF;
  border-top: 1px solid #22262e;
  border-bottom: 1px solid #22262e;
}
 
tr:first-child {
  border-top:none;
}

tr:last-child {
  border-bottom:none;
}
 
tr:nth-child(odd) td {
  background:#EBEBEB;
}
 
tr:nth-child(odd):hover td {
  background:#0C0336;
}

tr:last-child td:first-child {
  border-bottom-left-radius:3px;
}
 
tr:last-child td:last-child {
  border-bottom-right-radius:3px;
}
 
td {
  background:#FFFFFF;
  padding:20px;
  text-align:left;
  vertical-align:middle;
  font-weight:300;
  font-size:18px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
}

td:last-child {
  border-right: 0px;
}

th.text-left {
  text-align: left;
}

th.text-center {
  text-align: center;
}

th.text-right {
  text-align: right;
}

td.text-left {
  text-align: left;
}

td.text-center {
  text-align: center;
}

td.text-right {
  text-align: right;
}

input[title="addToDB"] {
  width: 100px;
  text-align: center;
}

input {
  margin: 5px;
}