CODEWITHSUNDEEP
javascriptangularjsconditional-statementsng-class
Rudziankoŭ
Rudziankoŭ

Reputation: 11251

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

I have following snippet:

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

It doesn't work, seems because of several matches for the same option. This is work fine:

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

Questions:

Upvotes: 1

Views: 235

Answers (3)

Konrad Kahl
Konrad Kahl

Reputation: 177

From the RFC 4627 object definition:

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.

In your case ng-class attribute argument is object so it can't have duplicate names. But you can you logical 'or' operator like this:

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

Upvotes: 1

Andriy
Andriy

Reputation: 15442

You can OR your conditions:

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

or check just the first letter

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

Upvotes: 1

Vicky Kumar
Vicky Kumar

Reputation: 1408

First one is not working because we are making object having duplicate key which is not allowed use 

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

Upvotes: 1

Related Questions