基于 limitTo angularjs 重新渲染列表

Question

所以我有 ng-repeat 指令输出的列表，上面有过滤器 | limitTo: amount。

amount 变量根据用户屏幕大小而变化。它正在正确更改，但在更新变量时列表不会重新呈现。

如何在 amount 变量更改后强制它重新渲染？

HTML

<li ng-repeat="n in allCategory | limitTo : amount" order="{{$index+1}}">

JS（控制器）

var screenWidth;

var trackListNumber = function () {
    screenWidth = $window.innerWidth;
    if(screenWidth < 1599) {
        console.log(screenWidth);
        $scope.amount = 18;
    } else {
        $scope.amount = 27;
    }
};

trackListNumber();

angular.element($window).bind('resize', function () {
    trackListNumber();
});

编辑

我将代码更改为

var screenWidth;

var trackIconsNumber = $scope.$apply(function() {
    screenWidth = $window.innerWidth;
    if (screenWidth < 1599) {
        console.log(screenWidth);
        $scope.iconsAmount = 18;
    } else {
        $scope.iconsAmount = 9;
    }
});

trackIconsNumber();

angular.element($window).bind('resize', function () {
    trackIconsNumber();
});

导致以下错误：

angular.js:14642 Error: [$rootScope:inprog] $digest already in progress

Answer 1

正如评论中explosion-pills所说，你应该使用$scope.$apply。实现应该是这样的：

长版

angular.element($window).bind('resize', function() {
  $scope.$apply(function() {
    trackListNumber();
  });
});

精简版

angular.element($window).bind('resize', function() {
  $scope.$apply(trackListNumber());
});

基于 limitTo angularjs 重新渲染列表

Rerender list basing on limitTo angularjs

javascript

render

angularjs

angularjs-ng-repeat