javascript - 将带有分隔符的列表绑定(bind)到 DOM AngularJS

Question

我正在尝试将位于数组中的人员列表分组，首先按街道，然后按号码，然后使用 ng-repeat 将它们绑定(bind)到 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>

上面的代码显示街道和号码分隔符，但无法显示名称列表。有什么想法吗？

Answer 1

这是因为 names 值无法访问，因为 data-ng-repeat="x in names" 位于 data-ng-repeat="(number ，名称)在数字中” 循环。尝试将模板更改为:

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