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> 

在代码中，我显示文档的每个版本(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;
}