所以我有 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
最佳答案
如explosion-pills评论中说,你应该使用 $scope.$apply 。实现应该像这样:
长版
angular.element($window).bind('resize', function() {
$scope.$apply(function() {
trackListNumber();
});
});
简短版本
angular.element($window).bind('resize', function() {
$scope.$apply(trackListNumber());
});
关于javascript - 基于 limitTo angularjs 重新渲染列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47874660/