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错误：[$ rootScope：inprog] $ digest已在进行中

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的重新登记列表

1 个答案: