AngularJS：单击时将 class 应用于数组中的多个元素

Question

我正在自学 angular 并阅读 O'Reilly AngularJS 的书。有一个电子邮件应用程序示例，我想添加一个按钮 "Mark as Read"，当单击该按钮时，它将向该行应用 class。

在做了一些研究后，我找到了基于使用 $index 到 select 行应用条件 classes 的解决方案，但是当我从其他元素切换 class 时单击按钮。你可以在这里看到我在说什么 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>

这是我添加到控制器中以在点击时应用 class 的内容：

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

我的目标是能够根据用户的需要将 class 应用于数组中的任何和所有元素（一次不仅仅是一个）。

有人可以帮助我理解为什么这不起作用以及我如何才能实现我的目标吗？我在 SO 上可以找到的所有 questions/answers 都是关于切换 classes 或设置活动 class，这与我想要完成的相反。

谢谢！

Answer 1

函数 readMessage 可以将消息标记为 read，并且 ng-class 设置 css class 如果设置了标记：

控制器：

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

模板：

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

见plunker

AngularJS：单击时将 class 应用于数组中的多个元素

AngularJS: apply class to multiple elements in array on click

angularjs

ng-class