ng-class是AngularJS预设的一个指令，用于动态自定义dom元素的class属性（即类名）
ng-class在实际的应用场景中还是比较灵活的，而在AngularJS中一般有三种方式给元素的class属性做一些门道，如下：
scope变量绑定（不推荐使用）：
<!doctype html>
<html ng-app="ngClass">
<head>
<meta charset="utf-8">
<title>ng-class</title>
<style>
.className{background-color:red;}
</style>
</head>
<body>
<div ng-controller="ngClassCnt">
<div class=‘{{text}}‘>Text</div>
</div>
<script src="js/angular-1.3.15/angular.js"></script>
<script>
var ngClass=angular.module("ngClass",[]);
ngClass.controller(‘ngClassCnt‘,function($scope){
$scope.text=‘className‘;
});
</script>
</body>
</html>
备注：这种方式完全没错，是angular提供的一种改变class的方式，但是在controller涉及了classname在我看来是乎总是那么诡异，我希望的是controller是一个干净的纯javascript意义的object。
对象key/value处理
<!doctype html>
<html ng-app="ngClass">
<head>
<meta charset="utf-8">
<title>ng-class</title>
<style>
.error{background-color:red;}
.warning{background-color:yellow;}
</style>
</head>
<body>
<div ng-controller="ngClassCnt">
<div ng-class=‘{error:isError,warning:isWarning}‘>{{messageText}}</div>
<button ng-click=‘showError()‘>Error</button>
<button ng-click=‘showWarning()‘>Warning</button>
</div>
<script src="js/angular-1.3.15/angular.js"></script>
<script>
var ngClass=angular.module("ngClass",[]);
ngClass.controller(‘ngClassCnt‘,function($scope){
$scope.isError=false;
$scope.isWarning=false;
$scope.showError=function(){
$scope.messageText=‘This is an error‘;
$scope.isError=true;
$scope.isWarning=false;
};
$scope.showWarning=function(){
$scope.messageText=‘Just a warning,Please carry on‘;
$scope.isWarning=true;
$scope.isError=false;
};
});
</script>
</body>
</html>
备注(copy上面代码执行下更清楚)：
1、当点击Error按钮执行showError()方法时，isError为true，isWarning为false，此时带有ng-class的那个div的class属性的值会增加一个类名error
2、当点击Warning时执行showWarning()方法，isError为false，isWarning为true,此时带有ng-class的那个div的class属性的值会增加一个类名warning
3、若前面1、2两点执行的方法，得到的isError、isWarning均为true,此时带有ng-class的那个div的class属性的值会增加两个类名error 、warning
依此类推。。。
字符串数组形式
<!doctype html>
<html ng-app="ngClass">
<head>
<meta charset="utf-8">
<title>ng-class</title>
<style>
.active{background-color:red;}
</style>
</head>
<body>
<div ng-controller="ngClassCnt">
<div ng-class="{true: ‘active‘, false: ‘inactive‘}[isActive]">11</div>
</div>
<script src="js/angular-1.3.15/angular.js"></script>
<script>
var ngClass=angular.module("ngClass",[]);
ngClass.controller(‘ngClassCnt‘,function($scope){
$scope.isActive = true;
});
</script>
</body>
</html>
备注：其结果是2种组合，isActive表达式为true，则带有ng-class的那个div的类名为active，否则为inactive。
时间： 2024-12-15 06:24:54