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

2020-12-13 02:35

阅读：537

标签：style blog class code java ext

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

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

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

原始状态:

soscw.com,搜素材

点击一次以后:

soscw.com,搜素材

angular学习笔记(九)-css类和样式1,搜素材,soscw.com

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

标签：style blog class code java ext

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

上一篇：如何使用 Python 创建一名可操控的角色玩家

下一篇：使用BeanUtils的Jar包问题

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：angular学习笔记(九)-css类和样式1
文章链接：http://soscw.com/index.php/essay/25904.html

亲，登录后才可以留言！

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

评论

热门文章

推荐文章

最新文章

置顶文章