AngularJS: применить класс к нескольким элементам в массиве при щелчке

Question

Я преподаю себя угловатым и работаю через книгу O'Reilly AngularJS. Есть пример приложения электронной почты, и я хочу добавить кнопку «Отметить как прочитанную», которая будет применять класс к строке при нажатии кнопки.

После выполнения некоторых исследований я нашел решения, применяющие условные классы на основе использования индекса $ index, чтобы выбрать строку, но это переключает класс из других элементов, когда я нажимаю кнопку. Вы можете видеть, что я говорю здесь in this Plunker.

Вот HTML, на мой взгляд:

<table> 
    <tr> 
    <td><strong>Sender</strong></td> 
    <td><strong>Subject</strong></td> 
    <td><strong>Date</strong></td> 
    </tr> 
    <tr ng-repeat='message in messages' ng-click='readMessage($index)' 
      ng-class='{markRead: $index==selectedRow}'> 
    <td>{{message.sender}}</td> 
    <td><a ng-href='#/view/{{message.id}}'>{{message.subject}}</a></td> 
    <td>{{message.date}}</td> 
    <td><button ng-click="remove(message)">Delete</button></td> 
    <td><button ng-click="markRead()">Mark as Read</button></td> 
    </tr> 
</table> 

и вот что я добавил к контроллеру, чтобы применить класс по щелчку:

$scope.readMessage = function(row) { 
    $scope.selectedRow = row; 
    }; 

Моя цель состоит в том, чтобы иметь способность к примените класс к любым и всем элементам массива, как пожелает пользователь (не только по одному).

Может кто-то, пожалуйста, помогите мне понять, почему это не работает и как я могу достичь своей цели? Все вопросы/ответы, которые я могу найти на SO, - это переключение классов или установка активного класса, что является противоположностью того, что я пытаюсь выполнить.

Спасибо!

Answer 1

Функция readMessage может помечать сообщения как read и ng-class установить класс CSS, если установлен флаг:

Контроллер:

$scope.readMessage = function(message) { 
    message.read = true; 
}; 

Шаблон:

ng-class='{markRead: message.read}' 

См. plunker