如何更新表中的特定行而不影响angularjs中的所有ng-repeat

时间:2015-12-22 08:37:09

标签: javascript angularjs

我只是使用AngularJs学习和构建一个简单的仪表板。

即将显示订单接收时间,处理时间,交货时间 我自己的休息服务。
在当前工作版本中,请求被发送到我的Rest并且每10秒在仪表板中显示所有订单。

当订单数量增加时,其余的消息大小变得很大。所以我的其余部分被修改为返回更新的订单或新订单。

有没有办法使用angularjs向现有表添加/更新行?

{
  "records": [

    {

      "OrderId": "101",
      "CustName": "John",
      "OrderReceived": "Nov 19, 2015 4:53:00 PM",
      "OrderProcessed": "Nov 19, 2015 4:54:06 PM",
      "OrderDelivered": ""

    }, {

      "OrderId": "102",
      "CustName": "Raju",
      "OrderReceived": "Nov 19, 2015 4:58:00 PM",
      "OrderProcessed": "",
      "OrderDelivered": ""
    }
  ]
}

我的 HTML信息中心表是,

<html>
  <script src="angular.js" type="text/javascript"></script>
  <link href="css/dashBoardStyles.css" rel="stylesheet" type="text/css" />

  <body>
    <div ng-app="myApp" ng-controller="customersCtrl">
      <table>
        <thead>
          <tr>
            <th> OrderId </th>
            <th> CustName </th>
            <th> OrderReceived </th>
            <th> OrderProcessed </th>
            <th> OrderDelivered </th>
          </tr>
        </thead>
        <tr ng-repeat="order in orders">
          <td>{{order.OrderId}}</td>
          <td>{{order.CustName }}</td>
          <td>{{order.OrderReceived}}</td>
          <td>{{order.OrderProcessed}}</td>
          <td>{{order.OrderDelivered}}</td>
        </tr>
      </table>
    </div>
  </body>

</html>

控制器是,

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http, $interval) {
      $interval(function() {
        $http.get("http://localhost:5060/RestService/eosOrderJson")
          .success(function(response) {
            $scope.update = response.records;
          });
      }, 10000)

      $http.get("http://localhost:5060/RestService/eosOrderJson")
        .success(function(response) {
          $scope.names = response.records;
        });

0 个答案:

没有答案