angularjs~ng-class
阿新 • • 發佈:2018-04-12
angular class ng-class
通過數據的雙向綁定(一般是不推薦的)
$scope.className = "change1"; <div class="{{className}}"></div> //或者像這樣 function changeClass(){ $scope.className = "change2"; } <div class="{{className}}"></div>
通過對象數組
function ctrl($scope) { $scope.isClassA = true; } <div ng-class="{true:'ClassA',false:'anotherClass'}[isClassA]"></div> //當isClassA為true時,增加ClassA樣式;當isClassA為false時,增加anotherClass樣式。
通過key/value(推薦使用)
function ctrl($scope) { $scope.isClassA = true; $scope.isClassB = false; $scope.isClassC = false; } <div ng-class="{'ClassA':isClassA,'ClassB':isClassB,'ClassC':isClassC}"></div> //當isClassA為true時,增加ClassA樣式;當isClassB為true時,增加ClassB樣式;當isClassC為true時,增加ClassC樣式。
angularjs~ng-class