Question

我有一个嵌套的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>

THX，

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

无法从外部作用域访问该属性，就像尝试从outerscope访问$index的{{1}}属性一样。

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

ng-repeat

然后在指令append里面过滤到parent，以便有一个钩子从外面过滤。

$scope.parent = {}

然后在父范围

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

 </div>

doc：angular ng-repeat

ngRepeat指令创建新范围

Answer 2

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

apple = theApples.trees[colorOfApple];

@Contrller

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

我在原始答案

中使用了由seeimurugan创建的小提琴中的代码

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

2 个答案: