i_ll_be_back i_ll_be_back - 1 month ago 8
AngularJS Question

Binding a list with deviders to the DOM AngularJS

I'm trying to group a list of people that are located in an array, first by their street and then by number and then bind them to the DOM using ng-repeat. The result I want is this:

{
'street1':{
'1':[ 'name1', 'name2', 'name3' ] ,
'2':[ 'name1', 'name2', 'name3' ]
},
'street2':{
'1':[ 'name1', 'name2', 'name3' ] ,
'2':[ 'name1', 'name2', 'name3' ]
}
}


Javascript:

var tmp = {};
for (i = 0; i < Names.length; i++) {
var street = Names[i].Street;
var num = Names[i].Number;
var name = Names[i].Name;
if (tmp[street] == undefined) {
tmp[street] = {};

}
var str = tmp[street];
if (str[num] == undefined) {
str[num] = [];
}
str[num].push(name);
}
var $scope.filteredTerrInfo = tmp;


HTML:

<ion-list data-ng-repeat="(street, numbers) in filteredTerrInfo">

<div class="item item-divider">
<h2> {{street}}</h2>
</div>

<div class="item item-divider" data-ng-repeat="(number, names) in numbers">
<h2>{{number}}</h2>
</div>

<div class="item item-left-thumbnail" data-ng-repeat="x in names">
<h2>{{x}}</h2>
</div>
</ion-list>


The code above displays the street and number deviders but can't display the names list. Any idea?

Answer

It's because names value is not accessible since data-ng-repeat="x in names" is outside data-ng-repeat="(number, names) in numbers" loop. Try changing template to:

<div class="item item-divider" data-ng-repeat="(number, names) in numbers">
   <h2>{{number}}</h2>
   <div class="item item-left-thumbnail" data-ng-repeat="x in names">
      <h2>{{x}}</h2>
   </div>
</div>
Comments