Question

我有像JSON一样的

＆＃13;

 [{
  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'
  }]
}]

＆＃13;

我希望将HTML表格中的数据显示为：

（标题1）---------- ---------- 123

Row1-名称：XYZ Addredd：600，PA

第二行 - 姓名：ABC Addredd：700，PA

（Heading2）---------- ---------- 321

第1行 - 名称：FFF Addredd：800，PA

第二行 - 名称：RRR Addredd：900，PA

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

Answer 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

Answer 2

我的帖子评论中的第二个Claies - 您需要重新调整数据以适合您的观点。在这种情况下，您需要这样的数据结构：

window

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

Answer 3

考虑JSON文件

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

}

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

如何使用ng-repeat代替典型的JSON？

3 个答案: