在 Angular 中设置为 'active' 的对象数组

Question

我有一个使用 ng-repeat

的项目列表

对象

var items = [{"name": "item1"},
 {"name": "item2"}...
];

HTML

<div ng-repeat="item in items" ng-click="addItemToCollection(item)">
  {{item.stuff}}
</div>

addItemToCollection 简单地获取选择的一个并将其添加或拼接到另一个数组中，并应用一些逻辑来允许它或拒绝它所以我最终得到类似的东西：

var selectedItems = [{"name": "item15"},
 {"name": "item26"}...
];

我如何将这个新数组绑定到原始数组上的 active class，也就是说，如果 item3 和item5 被点击了，在他们两个上设置一个 class of 'active'?

即：

{{item1.stuff}}
{{item2.stuff}}
{{item3.stuff}} // (has class active based on 2nd array)
{{item4.stuff}}
{{item5.stuff}} // (has class active based on 2nd array)

其中：

selectedItems = [{"name": "item3"},
 {"name": "item5"}...
];

在我的 ng-repeat 声明中设置 ng-class 以反映这一点的最佳方式是什么？

Answer 1

我认为为 selectedItems 数组的每次添加添加一个 class 的最简单方法是让用户使用以下代码：

<!-- toggle class with active field -->
<li class="list-group-item"
  ng-repeat="item in items"
  ng-class="{'active': active}"
  ng-click="active = toggleSelect(item)"> <!-- set active field on select -->
  {{ item }}
</li>

如您所见，我使用了 toggleSelect 函数，该函数 returns bool 取决于切换状态（添加或删除项目）。实施：

$rootScope.toggleSelect = function(item) {
    var itemIndex = false;

    //find item index if existing in selectedItems array
    for(var i = 0; i < $rootScope.selectedItems.length; i++) {
      if($rootScope.selectedItems[i].name === item.name) {
        itemIndex = i;
      }
    }

    //Add to array if not exists
    if(itemIndex === false) {
      $rootScope.selectedItems.push(item);
    }
    //Remove if item exists
    else {
      $rootScope.selectedItems.splice(itemIndex, 1);
    }

    //Return toggle status (item addition or removal)
    return (itemIndex === false);
};

JS Bin example

在 Angular 中设置为 'active' 的对象数组

Array of objects set to 'active' in Angular

javascript

arrays

angularjs

ng-class