在嵌套重复之外访问 Angular 过滤器的结果

Question

我一直在搜索和摆弄这个大约一天，但没有运气。我有一个使用 AngularJS 1.3.6 的站点，我需要在其中获取几个嵌套 ng-repeats 之外的过滤器结果。我正在过滤几个表中的行，并且过滤器本身工作正常。但是，在表格之外，我需要获得结果的数量（如果没有进行过滤，则获得总数）以及包含的 parent 的数量。我目前正在使用：

<tr ng-repeat="child in (filteredChildren = (parent.children| filter: query))">

我可以在 children 重复之外的 parent 重复中得到它。但是，我还需要一个 grandparent repeat 在所有将被引用的地方之外。
Here is a plunkr illustrating my problem.
在那里你可以看到 filteredChildren returns 在 grandparent 的重复中什么都没有，但是在 parent 的重复中它确实存在。

是否可以在嵌套 ng-repeats 之外访问过滤器的结果？

Answer 1

这是可能的，但理解原因的关键在于理解每个 filteredChildren 变量存在的范围。

filteredChildren 是 parent.children 的过滤版本并且存在于同一范围内。事实上，它是在那个范围内 声明的 - 这是 "parent" ng-repeat 内部（即每次迭代）的范围。所以，换句话说，它定义在 "grandparent" ng-repeat 的 child 范围内。

不是为过滤后的数组创建新变量，而是将其创建为在 grandparent 级别定义的数组的一项（每个 parent 都有对应的索引）。比方说，它将在每个 grandparent 变量上定义：

<div ng-repeat="grandparent in grandparents">
  <div ng-repeat="parent in grandparent.parents" ng-init="pIdx = $index">
    <div ng-repeat="child in (grandparent.filteredChildren[pIdx] = (parent.children| filter: query))">
    </div>
  </div>
</div>

当然，这将创建一个数组数组，您将需要另一个函数来计算一个 grandchildren 的总数parent:

$scope.sumLength = function(arrayOfArrays){
  var sum = 0;
  for (var i = 0; i < arrayOfArrays.length; i++){
     var childArray = arrayOfArrays[i];
     if (childArray) sum += childArray.length;
  }
  return sum;
}

然后您可以将其添加到 "grandparents" ng-repeat:

<div ng-repeat="grandparent in grandparents" 
     ng-init="grandparent.filteredChildren = []">
  total children: {{sumLength(grandparent.filteredChildren)}}
  ...
</div>

Answer 2

您想为每个 filteredParents[$index] & filteredChildren[$index]

设置索引

HTML

<body ng-controller="MainCtrl">
    <div ng-repeat="grandparent in grandparents">
      <div>
        <h2> {{grandparent.name}} has {{filteredParents[$index].length}} <!--??-->  Parents and {{filteredChildren[$index].length}} Children </h2>
      </div>
      <input type="search" ng-model="query" placeholder="Search for a child">
    <div ng-repeat="parent in ($parent.filteredParents[$index] = (grandparent.parents | filter: query))">
      <h2>{{parent.name}}</h2>
      {{filteredChildren.length}}
      <table>
        <thead>
          <tr>
              <th>col1</th>
              <th>col2</th>
              <th>col3</th>
          </tr>  
        </thead>
          <tbody>
            <tr ng-repeat="child in ($parent.filteredChildren[$parent.$index] = (parent.children | filter: query))">
             <td>{{child.value1}}</td>
             <td>{{child.value2}}</td>
             <td>{{child.value3}}</td>
          </tr>
          </tbody>
      </table>
    </div>
  </div>
  </body>

Working Plunkr

在嵌套重复之外访问 Angular 过滤器的结果

Accessing results of Angular filter outside of nested repeat

angularjs

angularjs-ng-repeat

angular-filters