AngularJs:-在ng-class的三元运算中添加多个条件

Question

我想在ng-class属性中条件表达式为真的时候整合多个类..

以下是我正在尝试但无法正常工作的代码：

<div class="col-md-4" ng-mouseover="hoverButton=true"  id="plain_text" ng-class="$state.current.name==='home' && 'hoverButton' ? 'tint,btn-white,panel_hover_font' : 'sd'" style="border: 1px solid;min-height: 300px;">

当条件为真时，我无法整合tint,btn-white,panel_hover_font。如何实现？

Answer 1

多个 CSS 类用空格分隔，而不是逗号：

ng-class="$state.current.name === 'home' && hoverButton ? 'tint btn-white panel_hover_font' : 'sd'"

另外，我假设hoverButton 是一个变量，而不是字符串'hoverButton'。

Answer 2

我不知道你是否可以使用三元运算符，但你可以使用简单的条件运算符：

<span ng-class="{'a set of classes': condition.isTrue, 'another set of classes': condition.isFalse }"> </span>

我在一个真实的项目中使用它并且它正在工作。在您的情况下，它将给出以下内容

<div class="col-md-4" ng-mouseover="hoverButton=true" id="plain_text" ng-class="{ 'tint btn-white panel_hover_font': ($state.current.name==='home' && 'hoverButton'),  'sd': !($state.current.name==='home' && 'hoverButton') } " style="border: 1px solid; min-height: 300px;">

Answer 3

见this fiddle

您必须将ng-class="'hoverButton' ? 'red, anotherclass, another' : 'white'" 更改为ng-class="hoverButton ? 'red anotherclass another' : 'white'"

我编写了一些 css 类用于测试。