通过AngularJS可以在应用中动态地设置CSS类和样式,只要使用{{}}插值语法把它们进行数据绑定即可。甚至还可以在模板中构造CSS类名和部分匹配方式。
实例如下:
ControllerCSS.html
<html ng-app='myApp'> <head> <title>CSS实例</title> </head> <body> <div ng-controller='CSSController'> <ul> <li class='menu-disabled-{{isDisabled}}' ng-click='stun()'>Stun</li> <li>Fly</li> <li>Start</li> </ul> </div> <script src="lib/angular/angular.js"></script> <link rel="stylesheet" type="text/css" href="css/menu.css"/> <script> var myApp=angular.module('myApp',[]) myApp.controller('CSSController', function($scope) { $scope.isDisabled = false; $scope.stun = function() { $scope.isDisabled = 'true'; } }); </script> </body> </html>
menu.css
.menu-disabled-true { color: gray; }
运行结果:打开页面时,Stun是激活的,点击后就置灰了,如下截图
stun菜单项上的CSS类将会被设置为menu-disabled-加上$scope.isDisabled的值。由于$scope.isDisabled属性的初始值为false,所以拼接出来的结果就是menu-disabled-false。由于这个结果无法匹配到任何CSS样式,所以不会产生任何效果。当$scope.isDisabled被设置为true时,CSS样式类就变成了menu-disabled-true,这样就会调用相应的样式让文本变成灰色。
当使用插值方式绑定内联样式的时候,这一技术同样适用,例如style="{{someexpression}}"。
虽然这种方式具有很大灵活性,但是也有一些不利的地方,那就是构造CSS类名时存在一定程度的间接性。虽然在这个小例子里面很容易理解它,但是当需要同时要模板和JavaScript中使用时,它很快就会变得无法维护,进而无法正确的创建CSS。
正是这个原因,Angular提供了ng-class和ng-style指令。这两个指令都可以接受一个表达式,表达式执行的结果可能是如下取值之一:
a.表示CSS类名的字符串,以空格分隔
b.CSS类名数组
c.CSS类名到布尔值的映射
如希望在应用头部的固定位置向用户显示错误和警告信息。使用ng-class指令,你可以这样做:
ControllerCSS02.html
<html ng-app='myApp'> <head> <title>CSS实例2</title> <link rel="stylesheet" type="text/css" href="css/menu02.css"/> </head> <body> <div ng-controller='HeaderController'> <div ng-class='{error:isError,warning:isWarning}'>{{messageText}}</div> <button ng-click='showError()'>Simulate Error</button> <button ng-click='showWarning()'>Simulate Warning</button> </div> <script src="lib/angular/angular.js"></script> <script> var myApp=angular.module('myApp',[]) myApp.controller('HeaderController', function($scope) { $scope.isError = false; $scope.isWarning = false; $scope.showError = function() { $scope.messageText = 'This is an error!'; $scope.isError = true; $scope.isWarning = false; }; $scope.showWarning = function() { $scope.messageText = 'Just a warning.Please carry on.'; $scope.isWarning = true; $scope.isError = false; }; }); </script> </body> </html>
menu02.css
.error { background-color:red; } .warning { background-color:yellow; }
运行结果:
点击“Simulate Error”按钮,效果如下:
点击“Simulate Warning”按钮,效果如下:
还可以做一些更炫的事情,例如把表格中被选中的行进行高亮显示。比方说一个名录,想把用户点击的那一行进行高亮显示。
在CSS中,为需要高亮显示的行设置一个样式:
menu03.css
.selected { background-color: lightgreen; }
ControllerCSS03.html
<html ng-app='myApp'> <head> <title>CSS实例3</title> <link rel="stylesheet" type="text/css" href="css/menu03.css"/> </head> <body> <table ng-controller='RestaurantTableController'> <tr ng-repeat='restaurant in directory' ng-click='selectRestaurant($index)' ng-class='{selected: $index==selectedRow}'> <td>{{restaurant.name}}</td> <td>{{restaurant.cuisine}}</td> </tr> </table> <script src="lib/angular/angular.js"></script> <script> var myApp=angular.module('myApp',[]) myApp.controller('RestaurantTableController', function($scope) { $scope.directory = [{name:'The Handsome Heifer',cuisine: 'BBQ'}, {name:'Green\'s Green Greens',cuisine: 'Salads'}, {name:'House of Fine Fish',cuisine: 'Seafood'}]; $scope.selectRestaurant = function(row) { $scope.selectedRow = row; }; }); </script> </body> </html>
运行效果:
相关推荐
AngularJS实现CSS动画
基于Spring Boot、AngularJS、CSS3、HTML5的响应式文件浏览管理器 功能介绍: 前后端分离,方便集成到自己的熟悉语言项目中 支持选择回调,如弹框文件选择 多语言支持 支持多种文件列表布局(图标/详细列表) 多文件...
kafka监控工具KafkaOffsetMnitor 没有响应,需要修改offsetapp目录index.html ,进行本地化。压缩包文件就是所需要的文件。
3款外观风格清新漂亮的CSS3开关按钮样式,基于CSS3的自定义Checkbox开关美化效果,有3D效果和扁平化风格。
自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式
CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了 CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多 栏布局等模块 [1] 。 CSS演进的...
使用CSS可以轻松地控制表单控件的样式,主要体现在控制表单控件的字体、边框、背景和内边距等。 CSS控制表单样式 由于form是块元素,重置浏览器的默认样式时,需要清除其内边距padding和外边距margin 使用标记定义...
会议AngularJS HTML CSS UCES集成商
css层叠样式表手册_css样式表_css层叠样式表_css样式表下载css层叠样式表手册_css样式表_css层叠样式表_css样式表下载css层叠样式表手册_css样式表_css层叠样式表_css样式表下载
css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式css翻页样式...
网络上收集的css table样式 好看table样式 好看的CSS——Table样式表
各种选择符、伪类、伪元素和层叠顺序的入门。 CSS 属性 各种层叠样式表级别一有效的属性的描述。 将样式表加入到HTML中 各种将样式表加入到HTML文本中的方法。 依赖样式表 怎样会是滥用样式表和使你的网页...
人民邮电(图灵)-CSS重构:样式表性能调优.201711.epub 人民邮电(图灵)-CSS重构:样式表性能调优
html5开发
CSS样式重写.cssCSS样式重写.cssCSS样式重写.cssCSS样式重写.cssCSS样式重写.cssCSS样式重写.css
css按钮样式
CSS样式按钮CSS样式按钮CSS样式按钮
HTML5.CSS3网页布局和样式精粹欢迎大家下载!
上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合
用来设置全局的通用的CSS样式初始化文件