jak połączyć klasę warunkowego oraz dane związane klasy w angularjs

Question

Aby zastosować różne klasy, gdy różne wyrażenia oceniać true:

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

Aby zastosować różne klasy klasę danych związana za pomocą []

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

Chcę wiedzieć, czy możliwe jest połączenie dwóch typów szablonów, tj; mieć klasę warunkową używając {} i klasy związanej z danymi przy użyciu []?

Każda pomoc zostanie bardzo doceniona.

Z góry dziękuję.

Answer 1

Można użyć następującej składni

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

className jest zmienną w zakresie. Jego wartość zostanie zastosowana do elementu div.

Oto przykład skrzypce Conditionally apply class in angularjs

Answer 2

proszę zobaczyć demo poniżej

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>