Блог

Я пытаюсь сгруппировать список людей, которые расположены в массиве, сначала по их улице, а затем по номеру, а затем привязать их к DOM с помощью ng-repeat. Результат, который я хочу, это:

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

Приведенный выше код отображает разделители улиц и номеров, но не может отобразить список имен. Есть идея?

Это потому, что names значение недоступно, поскольку data-ng-repeat="x in names" находится вне data-ng-repeat="(number, names) in numbers" цикла. Попробуйте изменить шаблон на:

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