Question

我有一个获取数据集合（即400个对象）并将其存储在数组中的应用程序。在我看来，我创建了一种无限滚动，基本上当页面加载时，它会插入5条记录。然后我在底部有一个标记为 more 的按钮，该按钮进入数据数组，并为 ngRepeat 指令中使用的数组切片。

起初它开始起作用，但总是失败。该函数被触发，但 ngRepeat 的列表没有更新。

我的控制器示例是：

w_initial = rand(4*N,1); % resonable initialization. maybe random? maybe zeros?
fsolve(@(w) object(reshape(w,4,N)), w_initial, ...)

查看：

 function ActivityController($uibModal,$http,$q, UserService) {
        var vm = this;
        vm.activity = [];
        vm.activityData = [];
        vm.maxItems = 5;
        vm.getMoreData = getMoreData;
        function getMoreData(){
            vm.activityData = vm.activity.slice(0, vm.activityData.length + 5);
        }

        UserService.getUserActivity()
                .then(function (response) {
                    vm.activity = response.data;
                    vm.activityData = vm.activity.slice(0, 5);
                });
    }

Answer 1

尝试使用$scope.$evalAsync功能。

    function getMoreData(){
        $scope.$evalAsync(function(){
         vm.activityData = vm.activity.slice(0, vm.activityData.length + 5);
        })  
    }

演示

var app = angular.module("app",[]);

app.controller('MainCtrl', function($scope) {

  $scope.data =[{"name":"a","age":"25"},{"name":"b","age":"23"},{"name":"c","age":"21"},{"name":"d","age":"21"},{"name":"e","age":"22"}];
  
  $scope.data2 =[];
  $scope.updateData = function(){
    var d = {"name":"newA","age":"25"};
     $scope.$evalAsync(function(){
         $scope.data.push(d);
       })
    }
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
  <input type="button" value="updateData" ng-click="updateData()" />
   <table>
     <tr ng-repeat="d in data">
         <td>{{d.name}}</td>
         <td>{{d.age}}</td>
    </tr>
  </table>
</div>

Answer 2

而不是消灭整个阵列。你应该将下一个元素推入其中。

function ActivityController($uibModal,$http,$q, UserService) {
    var vm = this;

    angular.extend(vm, {
        activity: [],
        activityData: [],
        maxItems: 5,
        getMoreData: function () {
            var sizeToGo = vm.activityData.length + maxItems;
            for (var i = vm.activityData.length; i < sizeToGo && i < vm.activity.length; ++i) {
                vm.activityData.push(vm.activity[i]);
            }
        },
        onInit: function () {
            UserService.getUserActivity()
            .then(function (response) {
                vm.activity = response.data;
                vm.activityData = vm.activity.slice(0, 5);
            });
        }
    });

    vm.onInit();
}

您还应在track by $index中添加ng-repeat。

<li ng-repeat="activity in activityCtrl.activityData track by $index | orderBy: 'date':false " class="list-group-item">
</li>

Answer 3

我认为您遇到的问题是重新分配vm.activityData而不是更新内容造成的。

function ActivityController($uibModal,$http,$q, UserService, $scope) {
    var vm = this;
    vm.activity = [];
    vm.activityData = [];
    vm.maxItems = 5;
    vm.getMoreData = getMoreData;

    function getMoreData(){
        // add another 5 items
        $scope.$apply(function() {
            Array.prototype.push.apply(vm.activityData, vm.activity.slice(vm.activityData.length, 5));
        });
    }

    UserService.getUserActivity()
            .then(function (response) {
                vm.activity = response.data;
                // add the first 5 items
                Array.prototype.push.apply(vm.activityData, vm.activity.slice(0, 5));
            });
}

<强>更新

使用vm.activityData

完成$scope.$apply()的更新

NgRepeat未从更新的阵列更新

3 个答案: