Angular.js:如何计算嵌套ng-repeat中的元素数量

时间:2016-06-10 19:40:54

标签: javascript angularjs angularjs-ng-repeat ng-repeat

所以,我的情况是我循环遍历一个JSON对象列表,其中包含一个列表作为属性。我有一个内部循环重复该列表属性。有点像这样:

Number of results: {{count}}

<div ng-repeat="jsonObject in outerList | someFilter" ng-show="innerList.length">
    <h1>{{jsonObject.Name}}</h1><br>
    <div ng-repeat="items in jsonObject.listAttr | someOtherFilter as innerList">
        {{items.data}}<br>
    </div>
    <br>
</div>

我面临的问题是找到一种方法来获取内部重复的每次迭代中所有元素的聚合计数。因此,如果第一个jsonObject有2个与内部过滤器匹配的东西,而第二个jsonObject有3个与内部过滤器匹配的东西,我们在整个循环之外显示5个计数(在上面的count变量或类似的东西中)。

我已经研究了许多方法来尝试并计算,但没有任何成功。我发现其中一个解决方案是,过滤器是用户可以动态更改的东西(通过搜索框,一个),所以我不能只应用所有页面加载时控制器中的过滤器并显示该过滤器。我可以从5个对象开始,直到用户在搜索框中键入内容,将数字降低到2。

1 个答案:

答案 0 :(得分:2)

我认为你想要这个...

$ scope

中的函数
$scope.moreOne = function(counter) {
  $scope[counter]++;
}

jsonObject中的每个元素都计算在内

<div ng-repeat="jsonObject in outerList | someFilter" ng-show="innerList.length">
      <h1>{{jsonObject.Name}}</h1><br>
      <div ng-repeat="items in jsonObject.listAttr | someOtherFilter as innerList" ng-init="moreOne('count')">
          {{items.data}}<br>
      </div>
      <br>
  </div>

你看到了ng-init吗?

ng-init="moreOne('count')"

也许这个解决方案并不是最好的...... Saludos! : - )

<强>更新

好的,您可以使用观察者来控制模型的变化。如果outerList或任何(您可以为任何属性定义观察者)发生更改,则会触发观察者。而且你只需要这个代码而没有moreOne函数: - )

    $scope.$watch("outerList", function(list) {
      $scope.count = 0;
      for(var i = 0; i < list.length; i++) {
        $scope.count += list[i]['listAttr'].length;
      }
    });
相关问题