ng-class表达式：合并条件和class名称

Question

假设我有 3 个变量（它们可以改变它的值）：

$scope.A = 'one';
$scope.B = true;
$scope.C = false;

<div ng-class="A"></div> 呈现 <div class="one">
<div ng-class="{'two': B, 'three': C}"></div> 呈现 <div class="two">

如何合并变量和表达式以呈现 <div class="one two">？我必须写一个函数吗？

我试过了：<div ng-class="[A, {'two': B}, {'three': C}]"></div>

Answer 1

我有两个解决方案：

看到他们在这个plunker

中工作

首先：在HTML

<div class="aclass {{A}}" ng-class="{'two': B, 'three': C}"></div>

二：带函数

<div class="aclass" ng-class="getClasses()"></div>

在你的控制器中

$scope.A = 'one';
$scope.B = true;
$scope.C = false;

$scope.getClasses = function(){
    var classes = "";
    classes += $scope.A;
    if($scope.B) classes += " two ";
    if($scope.C) classes += " three ";
    return classes;
}

两者都会导致

<div class="aclass one two"></div>

ng-class表达式：合并条件和class名称

ng-class expression: merge condition and class name

javascript

expression

directive

angularjs

ng-class