将数组项映射到重复列表

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 的回答中，您会在每个 <li> 之间添加一个额外的 <span> 元素。 Angular 现在支持表达式中的三元运算符，因此如果您不想显示跨度，可以简单地解决以下问题：

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

这还有一个额外的好处，即从您的代码中删除 5 个观察者，因为删除了 5 个 ng-if 语句。

将数组项映射到重复列表

Mapping array items to repeated list

angularjs

angularjs-ng-repeat