javascript - 如何在angularjs中使用ng-repeat以表格格式引入项目的嵌套数组？

我想使用ng-repeat携带每个位置的项目表。对于以下结构，我无法使用ng-repeat来解决。请有人帮我。提前致谢。

结构是。

$scope.locations = [
// Location #1
  [
    {
      location:"location1",
      delar:"delar-x",
      items:[
        {
          name:"Iphone",
          price:124
        },
        {
          name:"Blackbery",
          price:132
        }
      ]
    },
    {
      location:"location1",
      delar:"delar-y",
      items:[
        {
          name:"Headphone",
          price:10
        },
        {
          name:"Cabels",
          price:112
        }
      ]
    }
  ],
  // Location #2
  [
    {
      location:"location2",
      delar:"delar-x",
      items:[
        {
          name:"Iphone",
          price:124
        },
        {
          name:"Blackbery",
          price:132
        }
      ]
    },
    {
      location:"location2",
      delar:"delar-y",
      items:[
        {
          name:"Headphone",
          price:120
        },
        {
          name:"Cabels",
          price:110
        }
      ]
    }
  ]
]

我将如何采用以下格式？

<div>
  <h1> location1 </h1>
  <table>
    <tr>
      <td> Iphone </td>
    </tr>
    <tr>
      <td> Blackbery </td>
    </tr>
    <tr>
      <td> Headphone </td>
    </tr>
    <tr>
      <td> Cabels </td>
    </tr>
  </table>
  <h1> location2 </h1>
  <table>
    <tr>
      <td> Iphone </td>
    </tr>
    <tr>
      <td> Blackbery </td>
    </tr>
    <tr>
      <td> Headphone </td>
    </tr>
    <tr>
      <td> Cabels </td>
    </tr>
  </table>
<div>

最佳答案

您可以按照两步走法

<div>
    <h1 ng-repeat-start="loc in locs"> {{loc.location}} </h1>

    <table ng-repeat-end>
        <tr ng-repeat="item in loc.items">
            <td>{{item.name}}</td>
        </tr>
    </table>
</div>

然后规范位置数组

$scope.locations = [....];

//normalize the locations array to a format which can be easily iterated using ng-repeat
var map = {}, array=[];
angular.forEach($scope.locations, function(obj){
    angular.forEach(obj, function(obj){
        var items = map[obj.location];
        if(!items){
            items = map[obj.location] = [];
            array.push({
                location: obj.location,
                items:items
            })
        }
        console.log(obj)
        angular.forEach(obj.items, function(item){
            items.push(item);
        })
    });
})
$scope.locs = array;

演示：Fiddle