Conditional ng-class

问题:

I'm trying to use ng-class with a condition, like this:

<li ng-repeat="time in matter.times_hourly | filter:searchText"  ng-class="{'time.write_off_class' : time.write_off === true, 'time.narrativeState' : time.write_off === false}" >

• time.write_off_class has two classes inside it called "write_off_bg time_closed".

• time.narrativestate has one class inside it called "time_closed"

• time.write_off is a boolean.

So, I think my problem are the quotation marks.

I'm not sure where to put them, so I tried every possibility:

• Quotes on condition:

  `ng-class="{time.write_off_class : 'time.write_off === true', time.narrativeState : 'time.write_off === false'}"`
  

Result: Angular error.

`angular.min.js:107 `Error: [$parse:syntax] http://errors.angularjs.org/1.4.5/$parse/syntax?p0=.&p1=is%20unexpected%2C%…20%3D%3D%20true'%2C%20time.narrativeState%20%3A%20'time.write_off%20%3D%3DNaNalse'%7D&p4=.write_off_class%20%3A%20'time.write_off%20%3D%3D%20true'%2C%20time.narrativeState%20%3A%20'time.write_off%20%3D%3D%false'%7D

• No quotes:

ng-class="{time.write_off_class : time.write_off === true, time.narrativeState : time.write_off === false}"

Result: Angular Error.

 angular.min.js:107 Error: [$parse:syntax] http://errors.angularjs.org/1.4.5/$parse/syntax?p0=.&p1=is%20unexpected%2C%…f%20%3D%3D%20true%2C%20time.narrativeState%20%3A%20time.write_off%20%3D%3DNaNalse%7D&p4=.write_off_class%20%3A%20time.write_off%20%3D%3D%20true%2C%20time.narrativeState%20%3A%20time.write_off%20%3D%3D%false%7D

• Quotes on everything (class and condition):

  ng-class="{'time.write_off_class' : 'time.write_off === true', 'time.narrativeState' : 'time.write_off === false'}

Result: No error, but the element gets both classes, write_off_class AND narrativeState.

• Quotes on classes :

  ng-class="{'time.write_off_class' : time.write_off === true, 'time.narrativeState' : time.write_off === false}

Result: No error, and apparently the element gets the correct class (in this case, narrativeState, because at the beginning of the code all time.write_off are set to FALSE) BUT the element gets no style. If i put just ng-class="time.narrativeState" everything's ok, but if it gets it through the ng-class, then it is not working.

What am I doing wrong? Is there any reason for the element not styling through a condition with 'time.narrativeState' even when I'm sure it works by itself?

---

I've been trying more things and I know where the main problem is now, still cannot solve it.

My object 'time' has two fields inside that I use to give styling classes to some elements. "time.narrativeState" has, for example, the class "time_closed" on it.

The thing is that, when I write ng-class="time.narrativeState" and I go to see the element's style, I can see "time_closed" BUT if I use instead the condition I was talking about in this question ng-class="{{ time.write_off ? time.write_off_class : time.narrativeState }}" > what the element gets as style is not "time_closed" it is literally "time.narrativeState" and because time.narrativeState is not a class but a object's field, it dosen't work.

Why it is getting "time.narrativeState" as the class and it's not looking INSIDE time.narrativestate to get the correct class "time_closed"???

回答1:

You can use ternary operator inside simple interpolation tags:

ng-class="{{ time.write_off ? time.write_off_class : time.narrativeState }}"