angularjs嵌套ng-repeat子长度在ng-repeat之外答案

【问题标题】：angularjs nested ng-repeat child length outside ng-repeatangularjs嵌套ng-repeat子长度在ng-repeat之外
【发布时间】：2017-05-26 12:31:30
【问题描述】：

我有一个嵌套的 ng-repeat，并尝试在父 ng-repeat 之外使用过滤后的嵌套 ng-repeat 的长度。但是，结果始终为 0 ，如果是单个 ng-repeat 我可以得到结果。我试过 $parent.filtered 但它得到了错误的结果。

下面的例子：

 <div>
            Filtered Count :{{filtered.length}}
            <div ng-repeat="group in groups">
                <div ng-repeat="letter in  filtered = (group.letters | filter:filters.search )  | orderBy:orderByAttribute:sortReverse ">

                </div>
            </div>

        </div>

谢谢，

【问题讨论】：

这没有多大意义。您有几个组，每个组都有不同数量的过滤字母。应该显示这些数字中的哪一个？
您应该在控制器中完成所有这些操作
我需要过滤器的总数

标签： angularjs angularjs-ng-repeat

【解决方案1】：

filtered 是在ng-repeat 指令的范围内创建的，即隔离范围。

        <!-- PARENT SCOPE -->
        Filtered Count :{{filtered.length}}
        <div ng-repeat="group in groups">
          <!-- NEW SCOPE HERE -->
            <div ng-repeat="letter in  filtered = (group.letters | filter:filters.search )  | orderBy:orderByAttribute:sortReverse ">
              <!-- NEW SCOPE HERE -->
            </div>
        </div>

该属性无法从外部范围访问，就像尝试从外部范围访问ng-repeat 的$index 属性一样。

您可以将过滤后的数组绑定到外部范围的对象（例如在模板的控制器中）

$scope.parent = {}

然后在指令内追加过滤到父级，以便有一个从外部过滤的钩子。

<div ng-repeat="letter in  parent.filtered = (group.letters | filter:filters.search )  | orderBy:orderByAttribute:sortReverse ">

 </div>

然后在父作用域中

Filtered Count :{{parent.filtered.length}}

文档：angular ng-repeat

ngRepeat 指令创建新范围

【讨论】：

效果很好 bu 而不是 var parent，我不得不使用 $scope.parent={};谢谢
问题是它不会得到过滤的总数，它会得到父 ng-repeat 内的索引总数
@DanyNA 我的意思是 $scope.parent，刚刚修复它:)。父对象是一个钩子，可以让您查看过滤后的内容，您应该能够获得项目的总数以及内容。

【解决方案2】：

seeimurugan 给出的原始答案是here，我已经更新了他的小提琴以使其具有动态性。工作example

<div class="section" ng-app="phonecatApp" ng-controller="PhoneListCtrl">
    <div class="slide">
        <div class="container">
            <h2 class="section-title">Selected Mobiles</h2>
        </div>
        <div class="container-fluid fix ver2">
            <div class="col-md-3 work-thumb" ng-repeat="phone in phones">
                {{setCount($index)}}
                <a href="#">{{phone.name}}</a>
            </div>
        </div>
    </div>
    <p>Count: {{count}}</p>
</div>

@控制器

var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', function($scope) {
    $scope.count = 0;
    $scope.phones = [{
            'name': 'Nexus S',
            'snippet': 'Fast just got faster with Nexus S.'
        },
        {
            'name': 'Motorola XOOM™ with Wi-Fi',
            'snippet': 'The Next, Next Generation tablet.'
        },
        {
            'name': 'MOTOROLA XOOM™',
            'snippet': 'The Next, Next Generation tablet.'
        }
    ];
});

我在原始答案中使用了 seeimurugan 创建的小提琴中的这段代码

【讨论】：