我正在创建一张表格,其中只有少量数据。我不想一次性加载所有的数据。因此,我在页面上创建了一个按钮,当用户点击该按钮时,它会向服务器发送请求获取下一组四个数据。每次仅会加载四条数据。
<div class="container" ng-controller="paginateEmail" >
<div class="row" >
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Fail Agent</h3>
</div>
<table class="table">
<thead>
<th>
Email
</th>
</thead>
<tbody>
<tr ng-repeat="item in email1.emailList3">
<td>
{{item}}
</td>
</tr>
</tbody>
</table>
<td>
<form ng-controller="paginateEmail" ng-submit="submitForm()">
<button class="btn btn-default" type="submit">Previous</button> <button type="submit" class="btn btn-default">Next</button>
</form>
</td>
</div>
</div>
</div>
控制器代码如下:
basicInfo.controller("paginateEmail", function ($scope, $http) {
$scope.email1 = {
emailList3: []
};
var current=1
$scope.submitForm = function () {
$scope.email1.emailList3.length=0;
$http({method: 'GET', url: "../Dashboard/failAgentsList?current="+current}).
success(function (data) {
var i = 0;
for(i=0;i<data.list.length;i++){
$scope.email1.emailList3.push(data.list[i]);
}
current+=1
});
console.log(current)
}
$scope.submitForm();
}
);
之后,数据已经成功绑定到了 scope.email1.emailList3 上,但是视图没有刷新。我希望在点击下一个按钮后,视图也能够刷新,显示控制器中循环绑定的新数据。
提前感谢您的帮助。
emailList3
直接放在$scope
上吗?例如:$scope.emailList3 = []
。Angular 没有深度监测你的对象,所以它看不到变化;但是,如果数组直接在作用域上,它会更新视图。否则,在for
循环之后,你可以调用$scope.$apply()
,但我建议避免这样做。 - Tom$http
返回一个 Promise,可以通过调用then
方法来处理。Promise 应该已经集成在 Angular 生命周期中;我非常确定如果你在 Promise 的成功处理程序中更新$scope.email1...
,视图应该会自动更新,而不需要手动调用$apply
。 - link$timeout
返回一个 Promise,就像$http
一样。 - link