在angularJs中使用ng-class问题

我在使用angularJs和Bootstrap的应用程序中工作。我需要显示'场景'的标题，但根据场景的状态更改Css并显示不同的图标。在angularJs中使用ng-class问题

一开始我想这

<span class="text-success" data-ng-if="scenario.status=='success'"><i class="fa fa-check-circle"></i>Scenario {{scenario.title}}</span> 
<span class="text-danger" data-ng-if="scenario.status=='fail'"><i class="fa fa-exclamation-circle"></i>Scenario {{scenario.title}}</span> 
<span data-ng-if="scenario.status=='none'">Scenario {{scenario.title}}</span>

这是工作的罚款。但我想这样做更适当的方式，避免了代码的重复，所以我想用纳克级的，我已经修改了代码如下：

<span ng-class="{text-success:scenario.status=='success' || text-danger:scenario.status=='fail'}">Scenario {{scenario.title}} 
         <i ng-class="{fa fa-check-circle:scenario.status=='success' || fa fa-exclamation-circle:scenario.status=='fail'}"></i> 
         </span>

但是这种方式并不工作，我不明白是什么问题。有人可以帮我吗？

谢谢！

来源

2015-07-03 fgonzalez

'||'语法错了，你需要一个返回类名的角度表达式 – fantarama

正确的解决方法是：

的ngClass指令允许通过数据绑定的表达式你动态一个 HTML元素上设置CSS类代表要添加的所有类。

来源

2015-07-03 13:30:25 EpokK

$scope.getClassName = function() { 
    return "text-" + scenario.status;  
}

然后结合：

ng-class="getClassName()"

来源

2015-07-03 13:26:31 fantarama

这显然不是最好的方法。 – EpokK

我更喜欢在控制器中使用逻辑，而不是在模板中混合使用，并且此解决方案可以更加扩展到其他类型的状态 – fantarama

在angularJs中使用ng-class问题

回答

相关问题