本篇主要介绍通过数据绑定来给元素添加特定的类名,从而应用特定的样式
从一个最基本的例子来看:
<!DOCTYPE html>
<html ng-app>
<head>
<title>6.1css类和样式</title>
<meta charset="utf-8">
<script src="../angular.js"></script>
<script src="script.js"></script>
<style type="text/css">
.submit-false {
background:#efefef; color:#ccc
}
button {
border:1px solid #ccc; outline:0
}
</style>
</head>
<body>
<div ng-controller="ButtonDisable">
<button class="submit-{{disable}}" ng-click="deActive()">提交</button>
</div>
</body>
</html>
一个提交的按钮,点击以后就会被禁用,显示为灰色:
给button添加类名submit-{{disable}},这样,disable的改变,就会引起button类名的改变,
当disable变量值为false时,就会拼接成submit-false类名,运用相对应的样式
function ButtonDisable ($scope){
$scope.disable = true;
$scope.deActive = function(){
$scope.disable = false
}
}
原始状态:
点击一次以后:
时间： 2024-10-02 05:47:53