Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angularjs nested ng-repeat child length outside ng-repeat

I have a nested ng-repeat, and am trying to use the length of the filtered nested ng-repeat outside the parent ng-repeat. However, the result is always 0 ,if it is a single ng-repeat I can get the result. I have tried $parent.filtered but it is getting wrong results.

example below:

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

like image 443
Dany NA Avatar asked Feb 27 '26 05:02

Dany NA


1 Answers

filtered is created in the scope of the ng-repeat directive, that is an isolate scope.

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

that property is not accessible from the outer scope, it's like trying to access the $index property of the ng-repeat from the outerscope.

You can bind the filtered array to an object on the outer scope (e.g. in the controller of the template)

$scope.parent = {}

then inside the directive append filtered to parent in order to have a hook to filtered from the outside.

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

 </div>

then in the parent scope

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


doc: angular ng-repeat

ngRepeat directive creates new scope

like image 191
Karim Avatar answered Mar 02 '26 06:03

Karim



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!