Question

我有一个复选框列表。当我点击其复选框时，我试图有条件地将一个类应用于ng-class的已检查项目。我当前设置的问题是，当我单击复选框而不是所需的复选框项时，它将类应用于所有项。

如何使用ng-class而不是所有项目正确定位特定项目？

HTML

 <ul class="todos">
    <li ng-repeat="todo in todoItems" class="todo">
        <input type="checkbox"
          ng-click="delete($index)"
          id="todo-{{todo.id}}"/>
        <span class="todo-title"
          ng-class="{striked: thisTodoStriked === true}"
          >{{todo.title}}</span>
    </li>
  </ul>

咖啡

$scope.thisTodoStriked = false
$scope.delete = (indexedItem) ->
    TodoFactory.todos.getList().get(indexedItem).then (item) ->
        $scope.thisTodoStriked = true
        console.log 'delete invoked'

Answer 1

那是因为你告诉代码要删除所有这些代码。

更好的选择是将thisTodoStriked添加到项目中。

我不知道CoffeeScript，而是等效的JavaScript：

$scope.delete = function (item){
  $scope.todoItems[item].thisTodoStriked = true;
}

然后，在您的模板中：

<span class="todo-title"
      ng-class="{striked: todo.thisTodoStriked === true}"
      >{{todo.title}}</span>

在一系列项目中有选择地应用`ng-class`

1 个答案: