javascript 如何使用 AngularJs 刷新 Ng-repeat

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29348640/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 10:24:37  来源:igfitidea点击:

How To Refresh Ng-repeat With AngularJs

javascriptangularjsangularjs-directiveangularjs-scopeangular-ui

提问by Md Samir

I am creating a table with few data. I don't want to load all the data at once. So I create a button on view when the user click that buttoon then it hit the server and take the next 4 datasets. At one time only 4 data will.

我正在创建一个数据很少的表。我不想一次加载所有数据。因此,当用户单击该按钮时,我会在视图上创建一个按钮,然后它会访问服务器并获取接下来的 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>

and controller code is -

和控制器代码是 -

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();
    }
);

after that the data is successfully binded with the scope.email1.emailList3 but the view is not refreshed. I want that after clicking the next button the view is also refreshed with new data which were bind by the loop in controller.

之后,数据与 scope.email1.emailList3 成功绑定,但视图未刷新。我希望在单击下一个按钮后,视图也会用控制器中的循环绑定的新数据刷新。

Thanks in advance.

提前致谢。

采纳答案by Samir

For this problem you can add setTimeout but it is not the correct way to do this because, some times the server take more time to fetch data.

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

回答by Simon Staton

You need to start a digest cycle to have it update the view. Inside your success method use the $apply method:

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