表格行中的多个ng-repeat

Question

我想使用angularJS并使用ng-repeat来显示我的数据。我有一个JSON，其中我必须按ID /名称对特定的项目行进行分组。我不确定如何实现特定的输出。我添加了我需要的输出片段。

var obj = [{
    "id": 101,
    "name": "Victor",
    "address": "Mumbai"
    "order": [{
        "itemName": "Bulb",
        "quantity": 10
      },
      {
        "itemName": "Soap",
        "quantity": 3
      },
      {
        "itemName": "Towel",
        "quantity": 1
      }
    ]
  },
  {
    "id": 102,
    "name": "Francis",
    "address": "Nagpur"
    "order": [{
        "itemName": "Remote",
        "quantity": 1
      },
      {
        "itemName": "Bread",
        "quantity": 2
      }
    ]
  }
]

<table border="1" width="100%">
  <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Address</th>
    <th>Item Name</th>
    <th>Quantity</th>
  </tr>

  <!--- below is the output that i want -- uncomment and see the output -->

  <tr>
    <td>101</td><td>Victor</td><td>Mumbai</td><td>Bulb</td><td>10</td>
   </tr>
   <tr>
    <td></td><td></td><td></td><td>Soap</td><td>3</td>    
  </tr>
  <tr>
    <td></td><td></td><td></td><td>Towel</td><td>3</td>    
  </tr>
   <tr>
    <td>102</td><td>Francis</td><td>Nagpur</td><td>Remote</td><td>1</td>
   </tr>
   <tr>
    <td></td><td></td><td></td><td>Bread</td><td>2</td>    
  </tr>
 
</table>

Answer 1

说明：

您必须使用ng-repeat遍历数据。但是您还必须使用ng-repeat-start和ng-repeat-end，因为前三列不会在每一行中重复。

angular.module("tableApp", []).controller("tableController", ['$scope', function($scope) {

  var temp = [{
      "id": 101,
      "name": "Victor",
      "address": "Mumbai",
      "order": [{
          "itemName": "Bulb",
          "quantity": 10
        },
        {
          "itemName": "Soap",
          "quantity": 3
        },
        {
          "itemName": "Towel",
          "quantity": 1
        }
      ]
    },
    {
      "id": 102,
      "name": "Francis",
      "address": "Nagpur",
      "order": [{
          "itemName": "Remote",
          "quantity": 1
        },
        {
          "itemName": "Bread",
          "quantity": 2
        }
      ]
    }
  ]
  /*
  var arr = [];
  for(var i=0;i<temp.length;i++){
  var obj = {}

  obj.id = temp[i].id;
  obj.address = temp[i].address;
  obj.name = temp[i].name;

    for(var j=0;j<temp[i].order.length;j++){
  obj.itemName = temp[i].order[j].itemName;
  obj.quantity = temp[i].order[j].quantity;
  }
  arr.push(obj);
  }*/

  $scope.arr = temp;
}])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="tableApp">
  <table ng-controller="tableController" border="1" width="100%">
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Address</th>
      <th>Item Name</th>
      <th>Quantity</th>
    </tr>

    <!--- below is the output that i want -- uncomment and see the output -->

    <tr ng-if="0" ng-repeat-start="data in arr">
      <tr ng-repeat="a in data.order">
        <td ng-if="!$first"></td>
        <td ng-if="$first">{{data.id}}</td>
        <td ng-if="!$first"></td>
        <td ng-if="$first">{{data.name}}</td>
        <td ng-if="!$first"></td>
        <td ng-if="$first">{{data.address}}</td>
        <td>{{a.itemName}}</td>
        <td>{{a.quantity}}</td>
      </tr>

      <tr ng-if="0" ng-repeat-end></tr>
  </table>
</div>