如何在angularjs中结合条件类和数据绑定类答案

【问题标题】：how to combine conditional class and data bound class in angularjs如何在angularjs中结合条件类和数据绑定类
【发布时间】：2015-05-27 15:39:01
【问题描述】：

当不同的表达式计算结果为真时应用不同的类：

<div ng-class="{'class1' : expression1, 'class2' : expression2}">
    Hello World!
</div>

使用 [] 将不同的类应用于数据绑定类

 <div ng-class="[class3, class4]">
        Hello World!
    </div>

我想知道是否可以结合这两种模板，即；有一个使用 {} 的条件类和一个使用 [] 的数据绑定类？

任何帮助将不胜感激。

提前致谢。

【问题讨论】：

当表达式到达true 时是否要添加多个类？
是的，我还想添加数据有界类。
我不清楚。 :(你能举个例子吗？
class3 和 class4 是作用域变量，我想根据 expression1 和 expression2 应用 class1 和 class2

标签： angularjs styles ng-class

【解决方案1】：

请看下面的演示

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope) {


  $scope.redClass = 'red';
  $scope.boldClass = 'bold';

});

.border {
  border: 1px solid red
}
.red {
  color: red
}
.bold {
  font-weight: bold
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="homeCtrl">

    <p ng-class="[boldClass ,redClass,  1==1 ? 'border':'' ]">Hello Word</p>

  </div>
</div>

【讨论】：

【解决方案2】：

您可以使用以下语法

<div ng-class="[condition1 && 'class1', condition2 && 'class2', className]">
    Hello World!
</div>

className 是范围内的变量。它的值被应用于 div。

这是一个示例小提琴 Conditionally apply class in angularjs

【讨论】：

这很有帮助，享受赏金。