javascript - ng-class expression: merge condition and class name -
supposing have 3 variables (they can change value):
$scope.a = 'one'; $scope.b = true; $scope.c = false;
<div ng-class="a"></div>
renders<div class="one">
<div ng-class="{'two': b, 'three': c}"></div>
renders<div class="two">
how can merge variable , expression render <div class="one two">
? have write function?
i tried: <div ng-class="[a, {'two': b}, {'three': c}]"></div>
i've got 2 solutions in mind :
see them working in plunker
first : in html
<div class="aclass {{a}}" ng-class="{'two': b, 'three': c}"></div>
second : function
<div class="aclass" ng-class="getclasses()"></div>
and in controller
$scope.a = 'one'; $scope.b = true; $scope.c = false; $scope.getclasses = function(){ var classes = ""; classes += $scope.a; if($scope.b) classes += " 2 "; if($scope.c) classes += " 3 "; return classes; }
both result in
<div class="aclass 1 two"></div>
Comments
Post a Comment