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

AngularJS：点击

1 个答案: