如何在限制过滤器中动态分配变量并递增/递减其值？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在限制过滤器中动态分配变量并递增/递减其值？相关的知识，希望对你有一定的参考价值。
<div ng-repeat="*">
<div ng-repeat="item in list | limitTo:limit">
...content
</div>
<div ng-if="list.item.size > 10">
<button ng-click="incrementForEachItem(limit, false)">load less</button>
<button ng-click="decrementForEachItem(limit, true)">load more</button>
</div>
</div>
我有一些列表显示在每个重复的不同部分上，基本限制为10，按钮有条件地出现在具有超过条件的项目的部分中。
控制器代码是：
$scope.limit = 10;
$scope.incrementForEachItem = function(limit, status) {
if(resource === 'platforms') {
(status) ? $scope.limit += 10 : $scope.limit = 10;
}
console.log(this.resource);
};
一切都在工作，除了我坐在范围内的变量每个都增加了。如何在每次重复项目时将变量赋值给limitTo。物品不同。
编辑1：更多细节
视图上有两个嵌套的ng-repeat。对于每个元素，我只需要显示10个元素。要处理更多元素，我必须添加按钮，通过它我可以处理数据。我也处理了数据，但问题是我在$scope中有一个变量限制数据显示。问题是按钮与相同的范围变量进行交互，所以假设你在某个元素上点击显示更多，它显示+10数据，并且它也应用于另一个组件。
答案
html + Controller:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<title>Insert title here</title>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-init="limitInit=10">
<span ng-repeat="dat in res | limitTo: limitInit track by $index" >
{{dat}} {{dat.length}}
<span ng-repeat="da in dat.sub | limitTo: limitInit track by $index">
{{da}}
</span>
<span>....</span>
</span>
<button ng-click="limitInit=limitInit+10;">load more</button>
<button ng-click="limitInit=10">load less</button>
</div>
<script>
var app= angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http){
$http.get('data.json').then(function(data){
$scope.res= data.data;
console.log("The res " +JSON.stringify($scope.res));
});
} );
</script>
</body>
</html>
JSON
[
{
"name":"testOne",
"sub":["a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h"]
},{
"name":"testOne",
"sub":["a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h"]
},{
"name":"testOne",
"sub":["a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h"]
},{
"name":"testOne",
"sub":["a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h"]
},{
"name":"testOne",
"sub":["a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h"]
},{
"name":"testOne",
"sub":["a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h"]
},{
"name":"testOne",
"sub":["a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h"]
},{
"name":"testOne",
"sub":["a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h"]
},{
"name":"testOne",
"sub":["a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h"]
},{
"name":"testOne",
"sub":["a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h"]
},{
"name":"testOne",
"sub":["a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h"]
},{
"name":"testOne",
"sub":["a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h"]
},{
"name":"testOne",
"sub":["a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h"]
},{
"name":"testOne",
"sub":["a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h"]
},{
"name":"testOne",
"sub":["a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h","a","b","c","d","e", "f", "g", "h"]
}
]
另一答案
我能够解决这个问题。这是我在步骤中所做的：
第1步：声明ng-repeat的地方，我将索引分配给变量来跟踪循环。
$parentIndex = $index;
第2步：在控制器内部，我创建了一个数组，等于在视图上迭代的列表的长度。
var limitConstants = [10, 10, 10] // the number of elements you want to display.
第3步：点击show less / more按钮我通过了$parentIndex。第4步：然后在事件监听器中，我能够使用$parentIndex作为数组的索引来修改每个级别的元素的大小。
以上是关于如何在限制过滤器中动态分配变量并递增/递减其值？的主要内容，如果未能解决你的问题，请参考以下文章