Angularjs 在模板中消除大量ng

我连接到一个api，并根据播放器的状态更改显示的文本

div.meta(ng-if='friend.personastate == 6') Looking to play
div.meta(ng-if='friend.personastate == 5') Looking to trade
div.meta(ng-if='friend.personastate == 4') Snooze
div.meta(ng-if='friend.personastate == 3') Away
div.meta(ng-if='friend.personastate == 2') Busy
div.meta(ng-if='friend.personastate == 1') Online
div.meta(ng-if='friend.personastate == 0') Offline

我对父div上的类使用相同的方法：

ng-class='{grey: friend.personastate == 0, green: friend.personastate == 1, orange:friend.personastate == 2, yellow: friend.personastate == 3, blue:friend.personastate == 4}'

---

因为它是接口逻辑，所以可以保持这样吗？或者我应该把它变成一部分？我不认为控制器的工作是决定什么颜色的东西应该是什么。

摆脱所有NGIF的一个简单方法是使用。此对象的外观如下所示：

var stateInfo={
0: {
文本：“脱机”，
班级：'灰色'
},
1: {
文字：“在线”，
班级：“绿色”
},
2: {
文本：“忙”，
班级：'橙色'
},
// ...
//你明白了吗
// ...
}

在模板中，您将使用

{{stateInfo[friend.personastate].text}

来显示文本，并使用

ng class='stateInfo[friend.personastate].class'

来设置所需的类

---

这种方法的一个优点是减少了观察者的数量。

对于一系列ng if，ng开关就是针对这种情况设计的。为了简化ng类，您可以使用这里选择的答案中的第三个示例：我从来没有这样做过ng类，现在也没有时间这样做，但我认为表达式应该是

{grey:0，green:1，orange:2，yellow:3，blue:4}[friend.personastate]

@TahsisClaus我想您的意思是

{0:“grey”，1:“green”，2:“orange”，3:“黄色”，4:“蓝色”}[friend.personastate]

对吗？我可以为此使用指令吗？@maximerosin-Bélanger服务用于数据，指令用于html。将服务注入指令，并在指令的链接函数中使用服务api。