如何在限制过滤器中动态分配变量和 increment/decrement 其值？

Question

<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 中有一个变量限制了数据的显示。问题是按钮与相同的 scope 变量 交互，所以假设如果你在某个元素上点击 show more 它会显示 +10 数据加上它被应用到另一个组件作为嗯。

Answer 1

    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"]
    }
    ]

Answer 2

我能够解决这个问题。这是我在步骤中所做的：

第 1 步： 在声明 ng-repeat 的地方，我将索引分配给一个变量以跟踪循环。

$parentIndex = $index;

第 2 步： 在控制器中，我创建了一个数组，该数组的长度等于在视图上迭代的列表的长度。

var limitConstants = [10, 10, 10] // the number of elements you want to display.

第 3 步： 单击显示 less/more 按钮后，我通过了 $parentIndex。 第 4 步： 然后在事件侦听器中，我可以使用 $parentIndex 作为数组的索引来修改每个级别的元素的大小。

如何在限制过滤器中动态分配变量和 increment/decrement 其值？

How to assign variable and increment/decrement its value dynamically in limit filter?

javascript

scope

angularjs

angularjs-ng-repeat