Angular（九）css类和样式1

来源：互联网发布：阿里云rds数据库集群编辑：程序博客网时间：2024/05/29 17:08

转载地址：http://www.cnblogs.com/liulangmao/p/3718968.html

本篇主要介绍通过数据绑定来给元素添加特定的类名,从而应用特定的样式

从一个最基本的例子来看:

<!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    }}

原始状态:

点击一次以后:

阅读全文

0 0