2017-05-26 74 views
2

我有一个嵌套的ng重复,并试图使用过滤嵌套的ng重复以外的父ng-repeat的长度。 然而,结果总是0,如果它是一个单一的ng-repeat我可以得到结果。 我试过$ parent.filtered,但它得到错误的结果。下面angularjs嵌套ng重复的子长度以外的ng重复

例如:

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

+0

这并没有多大意义,创造了小提琴此代码。您有几个组,每个组都有不同数量的过滤字母。应显示哪些数字? –

+0

你应该已经完成​​了所有这些在你的控制器 –

+0

我需要的总过滤器 –

回答

3

filteredng-repeat指令范围创建的,即分离物范围。

该属性是不从外部范围访问,它就像试图从outerscope访问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}} 


DOC:angular ng-repeat

ngRepeat指令创建新的范围

+0

工程伟大的BU而不是var父母,我不得不使用$ scope.parent = {}; Thx –

+0

事情是,它不会得到过滤的总数,它会得到父母ng内的索引总数 –

+0

@DanyNA我的意思是$ scope.parent,只是修复它:)。父对象是一个钩子,它允许你看到过滤的内容,你应该能够得到与内容一起的项目总数。 – Karim

0

通过seenimurugan给出的原始答案将是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> 

@Contrller

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.' 
     } 
    ]; 
}); 

我用从seenimurugan在原来的答案