Question

我有以下一点代码。它基本上显示一个框，其中包含与其链接的前四个资源图像。我需要做的是添加额外的图像，如果少于四个。我做了一些搜索，但找不到任何东西。

<div class="collection_box" ng-repeat="i in collections">
    <div class="inner_collection_box">
        <div ng-repeat="r in i.resources || limitTo:4" class="collection_resource_image_div">
            <img class="collection_resource_image" src="/images/resource_images/{{ r.image }}" alt="{{ r.name }}" />
        </div>
        <strong>{{ i.name }}</strong>
    </div>
</div>

Answer 1

您可以使用过滤器添加额外的图像。因此，在您看来，它看起来像这样：

<div ng-repeat="r in i.resources | limitTo:4 | addImages">...</div>

您的过滤器可能如下所示：

yourApp.filter('addImages', function () {
  return function ($input) {
    var defaultImgs = [ ... ]; // your list with default images

    if ($input.length < 4) {
      $input.concat(defaultImgs.slice(0, 4 - $input.length));
    }

    return $input;
});

AngularJS如果ng-repeat小于x，则添加其他项

1 个答案: