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 expression：合并条件和类名

1 个答案: