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的{{1}}属性非常重要，因为有时候给出插值（img）导致无法加载资源，因为数据没有被删除。

对于ng-href来说同样的事情......

这里是PLUNKER ...

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

2 个答案: