Question

这是我想要实现的目标的简单版本：

$scope.colors = [{ "Name": "Red" },{ "Name": "Orange" },{ "Name": "Yellow" }];

<ul>
    <li>{{colors[0].Name}}</li>
    <li>{{colors[1].Name}}</li>
    <li>{{colors[2].Name}}</li>
    <li></li>
    <li></li>
</ul>

但我想更动态地做。也就是说，重复5个列表项，每个列表项包含数组colors中的项目，该项目最多可包含5个项目（在本例中为3）。

Answer 1

你可以这样做但你会在这里获得额外的跨度..

   <ul>
        <li ng-repeat="i in [1,2,3,4,5]">
          <span ng-if="i<=colors.length">{{colors[i].name}}</span>
         </li>
    </ul>

Answer 2

在maandoo的回答中，您将在每个<span>之间添加额外的<li>元素。 Angular现在支持表达式中的三元运算符，因此如果您不希望显示跨度，您可以简单地解决方案：

<ul>
  <li ng-repeat="i in [0,1,2,3,4]">
    {{colors[i] ? colors[i].Name : ''}}
  </li>
</ul>

由于删除了5个ng-if语句，因此还可以从代码中删除5个观察者。

将数组项映射到重复列表

2 个答案: