如何使用 AngularJs 刷新 Ng-repeat

Question

我正在创建一个数据很少的 table。我不想一次加载所有数据。因此，当用户单击该按钮时，我会在视图上创建一个按钮，然后它会点击服务器并获取接下来的 4 个数据集。一次只有 4 个数据。

<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 但视图没有刷新。我希望在单击下一步按钮后，视图也会使用控制器中的循环绑定的新数据进行刷新。

提前致谢。

Answer 1

您需要启动摘要循环才能更新视图。在你的成功方法中使用 $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
        });

Answer 2

对于这个问题，您可以添加 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);

如何使用 AngularJs 刷新 Ng-repeat

How To Refresh Ng-repeat With AngularJs

javascript

angularjs

angular-ui

angularjs-directive

angularjs-scope