class 的条件

Question

我正在尝试在条件下使用 ng-class，如下所示：

<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 里面有两个 class 叫做“write_off_bg time_closed”。
time.narrativestate 里面有一个 class 叫做“time_closed”
time.write_off 是布尔值。

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

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

条件报价：

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

结果：Angular 错误。

`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

没有引号：

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

结果：Angular错误。

 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

所有内容的引述（class 和条件）：

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

结果：没有错误，但元素同时获得 classes、write_off_class 和 narrativeState。

引用 classes :

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

结果：没有错误，显然元素获得了正确的 class（在本例中为 narrativeState，因为在代码开头所有 time.write_off 都设置为 FALSE）但是元素没有风格。如果我只输入 ng-class="time.narrativeState" 一切正常，但如果它通过 ng-class 获取它，那么它就不起作用了。

我做错了什么？即使我确定它可以自己工作，元素也没有通过 'time.narrativeState' 的条件进行样式设置吗？

我已经尝试了很多东西，我知道现在主要问题在哪里，但仍然无法解决。

我的对象 'time' 内部有两个字段，我用它们为某些元素提供样式 classes。例如，"time.narrativeState" 上面有 class "time_closed"。

问题是，当我写 ng-class="time.narrativeState" 并查看元素的样式时，我可以看到 "time_closed" 但是如果我改用我在这个问题中谈论的条件 ng-class="{{ time.write_off ? time.write_off_class : time.narrativeState }}" > 元素获得的样式不是 "time_closed" 它实际上是 "time.narrativeState" 并且因为 time.narrativeState 不是 class 而是对象的字段，所以它不起作用.

为什么它得到 "time.narrativeState" 作为 class 而它没有在 time.narrativestate 内部查找以获得正确的 class "time_closed"？？？

Answer 1

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

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

class 的条件

Conditional ng-class

conditional

angularjs

ng-class