如何在ng-repeat中切换多个初始项目

Question

http://plnkr.co/edit/nEfBE33AJen3mz9YvjeC?p=preview

我有一些填充列表的数据，我希望该列表中的前3项获得selected类。

我可以使用以下代码提供第一个项目或任何单个项目，但我的问题是如何在首次加载时切换多个项目？

  .controller('PageCtrl',
      ['$scope',
      function($scope) {

      var vs = $scope;
      vs.message = "1st, 2nd and 3rd item should be selected by default:";
      vs.toggleTags = { item: 0 }; // This gives the first item the selected class

      vs.myModel = [
        {name: 'aaa'},
        {name: 'bbb'},
        {name: 'ccc'},
        {name: 'ddd'},
        {name: 'eee'},
        {name: 'fff'},
        {name: 'ggg'}
      ];
  }]);

HTML：

<ul>
    <li ng-repeat="m in myModel" data-ng-class="{'selected':toggleTags.item == $index}">
        <div class="tag">{{m.name}}</div>
    </li>
 </ul>

Answer 1

在我们之间，我不喜欢通过视图中非常尴尬的ifs保持隐藏状态。这不是一个适合它的地方。因此，这里有一个修改，允许您选择多个项目：

<ul>
    <li ng-repeat="(k, m) in myModel" data-ng-class="{'selected':toggleTags.item.indexOf(k) > -1}">
        <div class="tag">{{m.name}}</div>
    </li>
</ul>

您的toggleTags随后变为：

vs.toggleTags = { item: [0, 1, 2] };

清洁，不那么令人惊讶和容易！

Answer 2

我最初将此作为我不小心删除的评论，因此我认为我会继续将其作为答案而不是重新评论，尽管Sébastien的答案具有更大的灵活性。这仅适用于第一个 X 项目，而不是可以选择：

<ul>
    <li ng-repeat="m in myModel" data-ng-class="{'selected':toggleTags.item >= $index}">
        <div class="tag">{{m.name}}</div>
    </li>
</ul>