javascript - ng 类表达式 : merge condition and class name

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>

在你的 Controller 中

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