DOMへのデビルダのリストのバインドAngularJS

Question

配列にある人物のリストを最初に通りに番号を付けてグループ化し、次にng-repeatを使用してDOMにバインドしようとしています。私が望む結果がこれです：

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

コード上記の通りと数devidersが表示されますが、表示できません名前リスト。何か案が？

Answer 1

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