您的位置：首页 > Web前端 > AngularJS

Angularjs中的ng-class

2015-05-29 11:25 399 查看

在angular中为我们提供了3种方案处理class：
1：scope变量绑定。（不推荐使用）
2：字符串数组形式。
3：对象key/value处理。

我们继续其他两种解决方案：
1字符串数组形式是针对class简单变化，具有排斥性的变化，true是什么class，false是什么class，其形如:

<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.active{background: green}
.active{background: red}
</style>
</head>
<body>
<div ng-controller="Aaa">
<div ng-class="{ true: 'active', false: 'inactive'}[isActive]">
11111
</div>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function Aaa($scope){
$scope.isActive=true;
}
</script>
</body>
</html>

其结果是2中组合，isActive表达式为true，则 active，负责inactive。

扩展：

<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.active{background: green}
.inactive{background: red}
</style>
</head>
<body>
<div ng-controller="Aaa">
<div ng-class="{ true: 'active', false: 'inactive'}[isActive]" ng-click="change()">
11111
</div>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function Aaa($scope){
$scope.isActive=true;
$scope.change=function(){
$scope.isActive=!$scope.isActive
}
}
</script>
</body>
</html>

这种方法做到了class之间简单的切换

2对象key/value处理主要针对复杂的class混合，其形如：

<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.selected{background: green}
.car{border:1px solid red}
</style>
</head>
<body>
<div ng-controller="Aaa">
<div ng-class="{'selected' : isSelected, 'car' : isCar}">
11111
</div>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function Aaa($scope){
$scope.isSelected=true;
$scope.isCar=true;
}
</script>
</body>
</html>

当 isSelected = true 则增加selected class，
当isCar=true,则增加car class，

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航