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

AngularJS: How to use the ngRepeat directive together with arrays and subarrays?

本文关键字：数组 一起 指令 ngRepeat AngularJS      更新时间：2023-09-26

假设存在一个类别数组。在这个数组中，对于每个类别，有一个可变数量的图像。此外，每个图像都有一个路径子数组，用于每个图像的不同大小。下面是一个例子。

$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>

我不知道如何循环通过一个数组与子数组和提取适当的数据。

使用like:

<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>

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

  <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作为img的src属性在这里很重要，因为有时给定插值({{something}})会导致无法加载资源，因为没有获取数据…

对于ng-href…

相关文章：