本篇主要介绍通过数据绑定来给元素添加特定的类名,从而应用特定的样式
从一个最基本的例子来看:
<!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 } }
原始状态:
点击一次以后: