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

【问题标题】：How to use ng-repeat for typical JSON?如何对典型的 JSON 使用 ng-repeat？
【发布时间】：2015-11-26 04:15:41
【问题描述】：

我有类似 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---------

Row1- 名称：XYZ 地址：600，宾夕法尼亚州

Row2- 名称：ABC 地址：700，宾夕法尼亚州

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

Row1- 名称：FFF 地址：800，宾夕法尼亚州

Row2- 名称：RRR 地址：宾夕法尼亚州 900

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

【问题讨论】：

您无法按照数据结构的方式获得所需的显示，您必须将该数据转换为按 ID 分组的数组。
即使我们修复了标签，那也不是 JSON。提供有效的东西来帮助人们帮助你
对不起，只是格式化 JSON（看起来像实际的）
仍然不是 JSON，它只是一个对象字面量。

标签： javascript angularjs filter

【解决方案1】：

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

棱角部分：

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

【讨论】：

【解决方案2】：

考虑 JSON 文件

  {
         "123": [
                  {
                    "Name": "ABC",
                    "Addredd": "600,PA"
                  },
                  {
                     "Name": "XYZ",
                     "Addredd": "600,PA"
                  }
                ],
        "321": [
                 {
                  "Name": "DEF",
                   "Addredd": "600,PA"
                  }
               ]

}

对标题和内循环使用 ng-repeat。

【讨论】：

【解决方案3】：

我在您帖子的评论中支持 Claies - 您需要重组数据以适应您的观点。在这种情况下，您需要这样的数据结构：

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

然后你可以使用双重 ng-repeat 来获得你需要的东西。

【讨论】：