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

【问题标题】：Accessing results of Angular filter outside of nested repeat在嵌套重复之外访问 Angular 过滤器的结果
【发布时间】：2015-04-04 07:03:42
【问题描述】：

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

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

我可以在父重复中得到子重复之外的内容。但是，我还需要在所有将被引用的地方之外的祖父母重复。
Here is a plunkr illustrating my problem.
您可以在此处看到filteredChildren 在祖父母的重复中不返回任何内容，但在父母的重复中却返回。

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

【问题讨论】：

标签： angularjs angularjs-ng-repeat angular-filters

【解决方案1】：

这是可能的，但理解原因的关键在于了解每个 filteredChildren 变量的作用域。

filteredChildren 是parent.children 的过滤版本，位于同一范围内。事实上，它是在那个范围内声明的——即“父级”ng-repeat 内部（即每次迭代）的范围。因此，换句话说，它是在“祖父母”ng-repeat 的子范围内定义的。

不是为过滤后的数组创建新变量，而是将其创建为在祖父级别定义的数组项（每个父项的相应索引）。比方说，它将在每个 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>

当然，这将创建一个数组数组，您需要另一个函数来计算祖父母的孩子总数：

$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;
}

然后您可以将其添加到“祖父母”ng-repeat:

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

【讨论】：

我真的很喜欢您的方法，感谢您考虑周全。看起来grandparent.filteredChildren 是一个多维数组，所以它的长度函数现在不起作用。我会重构它，但看起来这是一个很棒的方法。
@Julie，这没有意义。如果您将grandparent.filteredChildren 传递给sumLength()，那么它应该是一个数组，其中每个项目都是每个父项的过滤子项数组。
是的，我发现这是不对的...If you look in my plunkr 你会看到我收到一个错误，即传入的数组未定义。我将继续努力，但我们将不胜感激
哦，我明白了...grandparent.filteredChildren 被创建为对象，而不是数组。你需要初始化它，比如ng-init，到[]。 plnkr.co/edit/l0l290DNKnxsbkEgdgVh?p=preview。我更新了答案
哦，我怎么错过了。非常感谢您的帮助

【解决方案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

【讨论】：

索引肯定有帮助，也感谢您提供 plunkr。我将混合使用您的答案和 New Dev 的答案，因为它们有助于添加部分。