有条件的ng级 [英] Conditional ng-class

问题描述

我正在尝试使用具有以下条件的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 内部有两个名为 write_off_bg time_closed 的类。

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

    time.narrativestate 内部有一个称为 time_closed 的类

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

    time.write_off 是布尔值。

    所以，我认为我的问题是引号。

    So, I think my problem are the quotation marks.

    我不确定将它们放在哪里，所以我尝试了所有可能：

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

    
    

    • 行情：

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

  
  

  结果：角度错误。

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

  结果：角度错误。

   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
  

  
  
  

  
  

  • 所有事物的报价（类别和条件） ：

    ng-class = {'time.write_off_class'：'time.write_off === true'，'时间.narrativeState'：'time.write_off === false'}

    结果：没错，但是元素同时获得了两个类，write_off_class和narrativeState。

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

    
    

    • 对类的引用：

    ng-class = {'time.write_off_class'：time.write_off === true，'time.narrativeState'：time.write_off === false}

    结果：没有错误，并且显然该元素获得了正确的类（在这种情况下为narrativeState，因为在代码的开头，所有时间time.write_off都设置为FALSE），但是元素没有样式。如果我只放ng-class = time.narrativeState一切正常，但是如果它通过ng-class获得，则它不起作用。

    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.

    什么是我做错了吗？

    我一直在尝试更多的事情，而且我知道主要问题在哪里，仍然无法解决。

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

    我的对象时间内部有两个字段，用于为某些元素提供样式类。例如，
    time.narrativeState上具有类 time_closed。

    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.

    问题是，当我写 ng-class = time.narrativeState ，然后我去查看元素的样式，如果我改用我在这个问题中谈论的条件，我可以看到 time_closed但 ng-class = {{time.write_off？time.write_off_class：time.narrativeState}}> 元素的样式不是 time_closed，而是 time.narrativeState 并且因为time.narrativeState不是类，而是对象的字段，所以它不起作用。

    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.

    为什么将 time.narrativeState作为类，而将没有寻找INSIDE time.narrativestate获得正确的类 time_closed ？？？

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

    推荐答案

    您可以在简单的插值标记中使用三元运算符：

    You can use ternary operator inside simple interpolation tags:

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

    这篇关于有条件的ng级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！