AngularJS：条件 ng-class，一个选项有多个匹配项。

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>

Answer 2

您可以或您的条件：

<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>

或者只检查第一个字母

<span class="label"
          ng-class="{
          'label-success': resp.level[0] === 'A',
          'label-warning': resp.level[0] === 'B',
          'label-danger': resp.level[0] === 'C',
          'label-default': resp.level[0] === 'T'}">{[{resp.level}]}</span>

Answer 3

来自 RFC 4627 对象定义：

An object structure is represented as a pair of curly brackets surrounding zero or more name/value pairs (or members). A name is a string. A single colon comes after each name, separating the name from the value. A single comma separates a value from a following name. The names within an object SHOULD be unique.

在你的例子中，ng-class 属性参数是对象，所以它不能有重名。但是你可以像这样逻辑 'or' 运算符：

ng-class={'active': someVal === 1 || someVal === 2}

AngularJS：条件 ng-class，一个选项有多个匹配项。

AngularJS: Conditional ng-class with several matches for one option.

javascript

angularjs

conditional

ng-class