如何使用AngularJs刷新ng-repeat

Question

我正在创建一张表格，其中只有少量数据。我不想一次性加载所有的数据。因此，我在页面上创建了一个按钮，当用户点击该按钮时，它会向服务器发送请求获取下一组四个数据。每次仅会加载四条数据。

<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>&nbsp;<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 上，但是视图没有刷新。我希望在点击下一个按钮后，视图也能够刷新，显示控制器中循环绑定的新数据。

提前感谢您的帮助。

- Md Samir

---

你能把 emailList3 直接放在 $scope 上吗？例如：$scope.emailList3 = []。Angular 没有深度监测你的对象，所以它看不到变化；但是，如果数组直接在作用域上，它会更新视图。否则，在 for 循环之后，你可以调用 $scope.$apply()，但我建议避免这样做。 - Tom

$http 返回一个 Promise，可以通过调用 then 方法来处理。Promise 应该已经集成在 Angular 生命周期中；我非常确定如果你在 Promise 的成功处理程序中更新 $scope.email1...，视图应该会自动更新，而不需要手动调用 $apply。 - link

我制作了一个小的 pen 来演示它。$timeout 返回一个 Promise，就像 $http 一样。 - link

Answer 1

对于这个问题，你可以添加setTimeout，但这并不是正确的做法，因为有时服务器需要更长时间来获取数据。

setTimeout(function () {        
    $scope.email1.length = 0;
    $http({method: 'GET', url: '../Dashboard/confirmAgentList'}).
        success(function (data) {
            var i = 0;
            for (i = 0; i < data.confAgentList.length; i++) {
                $scope.email1.push(data.confAgentList[i]);                    
                }
               //and write you additional logic here
            }
        })
}, 500);

- Samir

---

建议使用 $timeout 而不是 setTimeout，它可以正确处理 $scope.$apply。 - Bernardo Dal Corno

Answer 2

你需要启动一个digest周期来更新视图。在你的success方法中使用$apply方法：

        success(function (data) {
            var i = 0;                   
            for(i=0;i<data.list.length;i++){                        
                $scope.email1.emailList3.push(data.list[i]);
            }          
            $rootScope.$apply();
            current+=1
        });

- Simon Staton

---

但是当我应用$rootScope.$apply()时，出现了以下错误： ReferenceError: $rootScope未定义。 - Md Samir

也许只需要 $scope.$apply？ - javinor

这其实是不对的，因为$http.success已经在$scope.$apply中执行，所以你永远不需要这样做，否则你会开始看到[$rootScope:inprog]错误。 - Tiago Martins