Question

我连接到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}'

保持它是否可以，因为它是接口逻辑？或者我应该把它变成局部的？我不认为控制器工作决定应该是什么颜色。

Answer 1

摆脱所有ngIfs的简单方法是使用ngInit将所有信息聚合到一个对象中。这个对象看起来像这样：

var stateInfo = {
  0: {
    text: 'Offline',
    class: 'grey'
  },
  1: {
    text: 'Online',
    class: 'green'
  },
  2: {
    text: 'Busy',
    class: 'orange'
  },
  // ...
  // You get the idea
  // ...
}

在模板中，您将使用<div class="meta">{{ stateInfo[friend.personastate].text }}</div>来显示文本，并使用ng-class='stateInfo[friend.personastate].class'来设置所需的课程。

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

摆脱模板中的大量ng-if

1 个答案: