我只是使用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;
});