javascript - AngularJS:有条件的 ng 类，一个选项有多个匹配项。

Question

我有以下片段:

<span class="label"
              ng-class="{
              'label-success': resp.level == 'A1',
              'label-success': resp.level == 'A2',
              'label-warning': resp.level == 'B1',
              'label-warning': resp.level == 'B2',
              'label-danger': resp.level == 'C1',
              'label-danger': resp.level == 'C2',
              'label-default': resp.level == 'This word was not found',
              'label-default': resp.level == 'The word level is not known'}">{[{resp.level}]}</span>

它不起作用，似乎是因为同一个选项有多个匹配项。 这很好用:

<span class="label"
              ng-class="{
              'label-success': resp.level == 'A1',
              'label-warning': resp.level == 'B1',
              'label-danger': resp.level == 'C1',
              'label-default': resp.level == 'The word level is not known'}">{[{resp.level}]}</span>

问题:

• 原因是什么？
• 如何解决这个问题？

Answer 1

第一个不起作用，因为我们正在制作具有不允许使用的重复键的对象

<span class="label"
          ng-class="{
          'label-success': (resp.level == 'A1' ||resp.level == 'A2'),

          'label-warning': (resp.level == 'B1' ||resp.level == 'B2'),

          'label-danger': (resp.level == 'C1' ||resp.level == 'c2'),

          'label-default': (resp.level == 'This word was not found' ||resp.level == 'The word level is not known')
          }">{[{resp.level}]}</span>