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中有一个变量限制数据显示。问题是按钮正在与相同的范围变量进行交互，所以假设你在某个元素上点击显示更多，它会显示+10数据，并且它也被应用到另一个组件。< / p>

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步：点击show less / more按钮后，我通过了$parentIndex。 第4步：然后在事件监听器中，我能够使用$parentIndex作为数组的索引来修改每个级别元素的大小。

如何在限制过滤器中动态分配变量并递增/递减其值？

2 个答案: