Question

我一直在寻找和摆弄这一天大约一天没有运气。我有一个使用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之外访问过滤器的结果？

Answer 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>

Answer 2

您想为每个filteredParents[$index]＆amp;设置索引。 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过滤器的结果

2 个答案: