在limitTo angularjs重新呈现筑底名单

Posted 2021-04-09

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

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

在qazxsw变量变化后如何强制它重新渲染？

html

amount

JS（控制器）

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

编辑

我把代码更改为

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

导致以下错误：

angular.js：14642错误：[$ rootScope：inprog] $ digest已在进行中

答案

正如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(); }); 在评论中所说，你应该使用$ scope。$ apply。实现应该是这样的：

长版

explosion-pills

精简版

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