Selectively applying `ng-class` in an array of items

Question

I have a list of checkboxes. I am attempting to conditionally apply a class to the checked-off item with ng-class when I click its checkbox. The problem with my current setup is it applies the class to all the items when I click a checkbox, instead of the desired checkbox item.

How I properly target a specific item with ng-class instead of all items?

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>

COFFEE

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

Answer 1

That would be because you're telling the code to strike out all of them.

A better option would be to add thisTodoStriked to the item.

I don't know CoffeeScript, but the equivalent JavaScript:

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

Then, in your template:

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