dynamic css class in angular

问题

I have following situation:

json:

[{"id":1,"prio":3},
{"id":2,"prio":3},
{"id":3,"prio":3},
{"id":4,"prio":4},
{"id":5,"prio":2}]

HTML/Angular

<ul ng-repeat>
<li class="high">{{id}}</li>
</ul>

Now my goal is to change the css class automatically depending on the attribute 'prio'.

When prio = 1 --> css= "low"
when prio = 2 --> css = "medium"

How can I achieve this?

回答1:

Use ngClass:

<ul>
  <li ng-repeat="item in arr" ng-class="{low: item.prio === 1, medium: item.prio === 2}">{{id}}</li>
</ul>

来源：https://stackoverflow.com/questions/28543535/dynamic-css-class-in-angular