<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.border{border: 1px solid #ccc;width: 100px;height: 100px;float: left;}
</style>
<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body ng-controller="con">
<!--
第一种方式没有什么代表性,不建议使用;第二种通过一个开关控制样式;第三种通过多个开关控制样式
-->
<div class={{classname}}>第一种</div>
<div ng-class="{true: 'border', false: 'inactive'}[off]">第二种</div>
<div ng-class={'border':true,'red':false}>第三种</div>
</body>
<script type="text/javascript">
var con = function($scope){
$scope.classname='border';
$scope.off = true;
}
</script>
</html>
关于ngClass的使用
最新推荐文章于 2023-06-03 14:38:51 发布