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

angular中的ng-class的几种常用方式

2018-01-23 11:55 357 查看
ng-calss的几种使用方法。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<style type="text/css">
.red{
width: 100px;
height: 100px;
background: red;
}
.green{
width: 100px; height: 100px;background: green;
}
</style>
</head>
<body>
<div ng-app="my-app">
<div ng-controller="frist">
<!--第一种 直接加变量-->
<div ng-class="tempClass"></div>
<!--第二种 用{{}} 包住的变量表达式-->
<div ng-class="{{bClass}}"></div>
<!--第三种-->
<div ng-class="{'red':num,'green':!num}"></div>
<!--第四种-->
<div ng-class="{true:'green',false:'red'}[num]"></div>
</div>

</div>

<script type="text/javascript">
var app = angular.module('my-app',[]);
app.controller('frist',function($scope){
$scope.tempClass = 'green';
$scope.bClass = "{'red':true,'green':false}"
$scope.num = true;

})
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航