javascript - Fitting multiple dependent datasets into AngualrJs ngRepeat -

i looking little bit of logically fitting 2 objects common reference angularjs ngrepeat.

example objects (these called service):

$scope.objarr1 = [     { id: 1, name: 'name 1', value: 'value 1', },     { id: 2, name: 'name 3', value: 'value 2', },     { id: 3, name: 'name 3', value: 'value 3', }, ];  $scope.objarr2 = [     { id: 1, name: 'name 1', value: 'value 1', objarr1: { id: 1, name: 'name 1', value: 'value 1', }, },     { id: 2, name: 'name 1', value: 'value 1', objarr1: { id: 1, name: 'name 1', value: 'value 1', }, },     { id: 3, name: 'name 1', value: 'value 1', objarr1: { id: 3, name: 'name 3', value: 'value 3', }, }, ]; 

something along lines. if can think of way; first array objects form buckets while second array objects form items fit corresponding bucket.

first approach

html:

<ul>     <li data-ng-repeat="item in objarr1 | filter : somefilter">{{item.name}}         <ul>             <!-- how filter objarr2 items based on objarr1 property ? -->             <li data-ng-repeat="item2 in objarr2 | filter : someotherfilter">{{item2.name}}</li>         </ul>     </li> </ul> 

in simple terms trying filter $scope.objarr2 items correspond current repeater item in inner repeater. tried various things someotherfilter unable reference item outer repeater.

problem

i couldn't figure out how filtering bit work.

second approach

when else failed decided combine data structures 1 so:

// deep copy avoid dependency angular.copy($scope.objarr1, $scope.objarr3); // loop on objarr3 , add empty array objarr2 // populate bit later angular.foreach($scope.objarr3, function (val, key) {     $scope.objarr3[key]["objarr2"] = []; }); 

then setup $watch-er`to monitor both objarr1 , objarr2 because don't know when these return.

$scope.$watchgroup(['objarr1', 'objarr2'], function (newvals, oldvals) {     // check make sure there stuff loop on     // wrongly assuming there items in both objarr1 , objarr2     // i'll worry when there no data bit later     if(newvals[0].length > 0 && newvals[1].length > 0) {         angular.foreach($scope.objarr1, function (val1, key1) {             angular.foreach($scope.objarr2, function (val2, key2) {                  if (val1.id === val2.objarr1.id) {                      $scope.objarr3[key1].objarr2.push(val2);                  }             });         });     } }); 

html:

<ul>     <li data-ng-repeat="item in objarr1 | filter : somefilter">{{item.name}}         <ul>             <li data-ng-repeat="item2 in item.objarr2">{{item2.name}}</li>         </ul>     </li> </ul> 

problem

while has worked fine on surface lovely error: [$rootscope:infdig] 10 $digest() iterations reached. aborting! in console.

i bit puzzled cause $digest fire many times.

however, commenting update line $scope.objarr3[key1].objarr2.push(val2); of watcher error goes away. don't understand how result in digest iterations.

halp

in end either of approach came has problem. while second approach job , populates repeater correctly there nasty error in console.

anyone bit more experience in field please help.

update

some of silly things tried someothefilter are:

data-ng-repeat="item2 in objarr2 | filter : someotherfilter" $scope.someotherfilter = function(item){     // item current inner repeaters item2 object     // way angular filter works     return item.objarr2 === $scope.objarr1.id; // silly idea there };  data-ng-repeat="item2 in objarr2 | filter : someotherfilter(item)" $scope.someotherfilter = function(item){     // if memory serves me right     // in case item repeaters current item2 object     // no ability reference outer repeaters current item object }  data-ng-repeat="item2 in objarr2 | filter : someotherfilter(item, item2)" $scope.someotherfilter = function(item, item2) {     // if memory serves me right     // in case item inner repeaters current item2 object     // , item2 undefined     // again no ability reference outer repeaters current item } 

at point gave on first approach. thinking might have been able utilise $index (if inner repeater somehow or other didn't overwrite outer repeaters $index reference) index value of outer repeater , try @ $scope.objarr1[index].

no matter scenario have worked someotherfilter inner working need compare inner object objarr1.id outer objects id.

update (learn mistakes)

ok, after confirming answer working still had same issue in production example error: [$rootscope:infdig] 10 $digest() iterations reached. aborting!.

after cooling down few days decided revisit problem , found.

<div class="block" data-ng-repeat="team in teams | filter : validateagecategory">     <div data-ng-style="getheaderstyle()">         <span>{{team.name}}</span>         <!-- bunch of things removed brevity -->     </div>     <ul data-ng-style="getliststyle()">         <li data-ng-repeat="players in players | filter : { team: { id: team.id, }, }">             <a data-ng-style="getlistitemstyle()" data-ng-href="#/players/{{player.id}}">{{player.name}}</a>         </li>     </ul> </div> 

i adapted team/player example easier understanding. regardless notice in production use few ng-style calls retrieve css.

reason why doing because ie has tendency remove {{}} definitions inline style="color: {{color}};" definition during document load. it's ie bug speak.

moving on, found innermost ng-style causing error $digest. removing data-ng-style="getlistitemstyle()" happy. bu me of course.

looking @ overhead better create css classes , instead apply classes based on indexing style html.

there have it.

ok, i'll try best help.

i think problem second approach somehow related this question. read comments there. might related list being changed filter.

as first approach, i'm still not sure trying do, i've created this example show you can filter inside nested ngrepeats.

btw, if need access outer $index inside inner ngrepeat, can use nginit.