javascript - 如何对典型的 JSON 使用 ng-repeat？

Question

我有像

这样的 JSON

 [{
  Entry: [{
    ID:123,
    Name: 'XYZ',
    Addredd: '600, PA'
  }, 
  {
    ID:123,
    Name: 'ABC',
    Addredd: '700, PA'
  },
{
    ID:321,
    Name: 'RRR',
    Addredd: '800, PA'
  },
{
    ID:321,
    Name: 'FFF',
    Addredd: '900, PA'
  }]
}]

我想将 HTML 表格中的数据显示为:

(标题1)----------123----------

第 1 行 - 名称:XYZ 地址:600，宾夕法尼亚州

第 2 行 - 名称:ABC 地址:700，宾夕法尼亚州

(标题2)----------321----------

第 1 行 - 名称:FFF 地址:800，宾夕法尼亚州

第 2 行 - 名称:RRR 地址:900，宾夕法尼亚州

我尝试使用自定义过滤器，但无法使用 ng-repeat。 Angular JS 有什么办法可以做到这一点吗？谢谢

Answer 1

我尝试使用 Angular 解析 JSON 数据并生成您想要的输出。首先，我尝试以有组织的格式制作 JSON 数据，以便更容易在 DOM 中循环。一定还有其他更好的方法。但我认为这可能对你有帮助。以下是我的版本:

有 Angular 部分:

angular.module("main", []).controller("MyCtrl", function($scope) {
var dataSrc = [
     {
       ID:123,
       Name: 'XYZ',
       Addredd: '600, PA'
     },
     {
       ID:123,
       Name: 'ABC',
       Addredd: '700, PA'
     },
     {
       ID:321,
       Name: 'FFF',
       Addredd: '800, PA'
     },
     {
       ID:321,
       Name: 'RRR',
       Addredd: '900, PA'
     },
     {
       ID:322,
       Name: 'RRR',
       Addredd: '900, PA'
     }
  ];

   var newDataSrc = new Array();
   var tempDataSrc = new Array();
   var idList     = new Array();
   for(i in dataSrc){
      var item = dataSrc[i];
      if(idList.indexOf(item.ID) !== -1){
        tempDataSrc[item.ID].push({'Name' : item.Name, 'Addredd': item.Addredd});
      }
      else{
        idList.push(item.ID);
        tempDataSrc.push(item.ID);
        tempDataSrc[item.ID] = new Array();
        tempDataSrc[item.ID].push({'Name' : item.Name, 'Addredd': item.Addredd});
      }
   }

   for(k in idList){
      var eachId = idList[k];
      var dataItem= [{'id' : eachId, 'data' : tempDataSrc[eachId]}];
      newDataSrc.push(dataItem);
   }

   $scope.items = newDataSrc;
});

DOM 部分

<div ng-app="main">
   <div ng-controller="MyCtrl">
   <table>
     <tbody>
       <tr ng:repeat="item in items track by $index" ng-if="item != null">
         <td>
         (Heading) --------------{{item[0].id}}------------
          <div ng:repeat="info in item[0].data track by $index">
            Row{{$index + 1}} - Name: {{info.Name}} Addredd: {{info.Addredd}}
          </div>
         </td>
       </tr>
     </tbody>
   </table>
   </div>
</div>

输出

(Heading) --------------123------------
Row1 - Name: XYZ Addredd: 600, PA
Row2 - Name: ABC Addredd: 700, PA
(Heading) --------------321------------
Row1 - Name: FFF Addredd: 800, PA
Row2 - Name: RRR Addredd: 900, PA
(Heading) --------------322------------
Row1 - Name: RRR Addredd: 900, PA