码迷,mamicode.com
首页 > Web开发 > 详细

angular学习笔记(九)-css类和样式1

时间:2014-05-09 20:20:42      阅读:374      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   ext   

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

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

bubuko.com,布布扣
<!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>
bubuko.com,布布扣

一个提交的按钮,点击以后就会被禁用,显示为灰色:

给button添加类名submit-{{disable}},这样,disable的改变,就会引起button类名的改变,

当disable变量值为false时,就会拼接成submit-false类名,运用相对应的样式

function ButtonDisable ($scope){
    $scope.disable = true;
    $scope.deActive = function(){
        $scope.disable = false
    }
}

原始状态:

bubuko.com,布布扣

点击一次以后:

bubuko.com,布布扣

angular学习笔记(九)-css类和样式1,布布扣,bubuko.com

angular学习笔记(九)-css类和样式1

标签:style   blog   class   code   java   ext   

原文地址:http://www.cnblogs.com/liulangmao/p/3718968.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!