Question

我正在创建一个包含少量数据的表。我不想一次加载所有数据。因此，当用户单击该按钮然后它点击服务器并获取接下来的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重复

2 个答案: