javascript - 如何使用 Angular 更新 DOM 元素

Question

这是我的 Angular 代码:

<div ng-repeat="s in doc.Summaries">
  <a href="#" ng-click="doc.summaryIdShown = s.index">
    {{s.SummaryState}}: {{s.StopLightColor}}, {{s.LevelOfEvidence}} - {{s.UserName}} - {{s.UpdateTimeStamp | date}}
  </a>
  <br />
  <br />
</div> 

在代码中，我显示了文档的每个版本(s in doc.Summaries)的链接。然后，当用户单击链接时，我会更新我的模型变量“summaryIdShown”，并更新显示在旁边的版本。问题是:我想更新这些链接，以便与显示的版本相对应的链接看起来不同。我该怎么做？

我考虑过编写自定义指令，但在实现时遇到了问题。

提前致谢。

Answer 1

添加 ng-class 指令，传入一个对象，该对象具有您要添加的类名和它应该检查的 bool 条件:

<div ng-repeat="s in doc.Summaries">
    <a href="#" ng-click="doc.summaryIdShown = s.index" ng-class="{'green': doc.summaryIdShown === s.index}">
         {{s.SummaryState}}: {{s.StopLightColor}}, {{s.LevelOfEvidence}} - {{s.UserName}} - {{s.UpdateTimeStamp | date}}
    </a>
    <br />
    <br />
</div> 

CSS:

.green {
    color: green;
}