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对象定义：

对象结构表示为一对花括号包含零个或多个名称/值对（或成员）。名字是串。每个名称后面都有一个冒号，分隔名称从价值。单个逗号将值与后续值分开名称。对象应该中的名称是唯一的。

在您的情况下，ng-class属性参数是object，因此它不能具有重复的名称。但你可以这样逻辑'或'运算符：

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

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

3 个答案: