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

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

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

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

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

此外，我认为hoverButton是一个变量，而不是字符串'hoverButton'。

Answer 3

请参阅this fiddle

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

我为测试目的编写了一些css类。