Question

我有以下标记：

<div ng-app="app" ng-controller="Ctrl">
    <label ng-repeat="role in roles">
        <div ng-class="{ big: selectedRoles }">
            <input type="checkbox" checklist-model="selectedRoles" checklist-value="role.id" />{{role.text}}</div>
    </label>
</div>

我需要上课＆＃34;大＆＃34;设置为检查项目。 ng-class属性未按预期工作。 http://jsfiddle.net/qky1ownh/1/中的已复制问题。

Answer 1

如果您不想在视图中保留填充逻辑，则可以使用对象文字来跟踪对列表的更改。

$scope.selectedRoles = {
  1: true,
  2: true,
  4: true
};

它允许您在复选框上使用ng-model，而不是一些时髦的复选框列表/值类型的东西：

<div ng-class="{ big: selectedRoles[role.id] }">
  <input type="checkbox" ng-model="selectedRoles[role.id]" />{{role.text}}
</div>

更新小提琴： http://jsfiddle.net/qky1ownh/8/

Answer 2

由于selectedRoles是一个角色ID数组，您可以使用array.indexOf查找是否在所选列表中： -

<div ng-class="{ big: selectedRoles.indexOf(role.id)+1 }">

由于indexOf返回数组中的项目索引（从零开始），而在未找到时返回-1，只需添加1以使其变得虚假。

或者只是在控制器中添加一个方法来阻止视图中的任何逻辑以及控制器比模板更易测试的事实，执行：

控制器： -

$scope.hasRole = function(id){
  return $scope.selectedRoles.indexOf(id) > -1;
}

并在视图中使用它：

<div ng-class="{ big: hasRole(role.id) }">

Answer 3

另一个选择是将选定的属性应用于对象。

小提琴：http://jsfiddle.net/7kfum1uu/

<div ng-class="{ 'big': role.selected }">
      <input type="checkbox" ng-model="role.selected">{{role.text}}
</div>

AngularJS将类属性绑定到模型

3 个答案: