javascript - 基于 limitTo angularjs 重新渲染列表

Question

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

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

如何强制它在 amount 之后重新渲染可变的改变？

HTML

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

JS( Controller )

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