AngularJS：如何将ngRepeat指令与数组和子数组一起使用？

Question

假设存在一系列类别。 对于每个类别，此数组中包含的图像数量是可变的。 另外，每个图像都有一个路径子数组，用于改变每个图像的大小。 下面列出的是一个示例。

$scope.categories = [
  { "id": 1, "name": "Fashion", "images": [
    { "id": 1, "paths": [
      { "id": 1, "pathThumb":"thumbnail_A.jpg"},
      { "id": 2, "pathFull":"full_size_A.jpg"}
    ]}
  ]},
  { "id": 2, "name": "Sunsets", "images": [
    { "id": 1, "paths": [
      { "id": 1, "pathThumb":"thumbnail_B.jpg"}
      { "id": 2, "pathFull":"full_size_B.jpg"}
    ]},
    { "id": 2, "paths": [
      { "id": 1, "pathThumb":"thumbnail_C.jpg"}
      { "id": 2, "pathFull":"full_size_C.jpg"}
    ]}
  ]}
];

我想使用AngularJS ngRepeat指令遍历上述数据以产生以下内容

<div class="item fashion">
  <a href="full_size_A.jpg"><img src="thumbnail_A.jpg"></a>
</div>
<div class="item sunset">
  <a href="full_size_B.jpg"><img src="thumbnail_B.jpg"></a>
</div>
<div class="item sunset">
  <a href="full_size_C.jpg"><img src="thumbnail_C.jpg"></a>
</div>

我认为它看起来像以下内容：

<div class="item {{category.name}}" ng-repeat="...">
  <a href="{{category.image.path.pathFull}}"><img src="{{category.image.path.pathThumb}}"></a>
</div>

我不确定如何使用子数组遍历数组并提取适当的数据。 任何帮助将不胜感激。

Answer 1

使用方式如下：

<div ng-repeat="item in categories">
    <div ng-repeat="image in item.images">
        <a ng-href="{{image.paths[1].pathFull}}">
            <img ng-src="{{image.paths[0].pathThumb}}">
        </a>
    </div>
</div>

Answer 2

您应该使用包装容器以获取类别的子数组。

的HTML

  <div ng-repeat="category in categories">
    <div class="item {{category.name | lowercase}}" ng-repeat="image in category.images">
      <a ng-href="{{image.paths[1].path}}">
        <img ng-src="{{image.paths[0].path}}">
      </a>
    </div>
  </div>

这里我将动态类与ng-class使用，并使用小写过滤器将名称字符串的小写版本作为类...

采用ng-src的src属性img是这里重要的，因为有时给插值（ {{something}}原因无法加载资源，因为数据不fecthed ...

ng-href也是一样...

这是PLUNKER ...