AngularJS教程 ng-style 指令简单示例


Posted in Javascript onAugust 03, 2016

AngularJS ng-style 指令

AngularJS 实例

使用AngularJS添加样式,使用 CSS key=>value 对象格式:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-style="myObj">菜鸟教程</h1>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
 $scope.myObj = {
  "color" : "white",
  "background-color" : "coral",
  "font-size" : "60px",
  "padding" : "50px"
 }
});
</script>

</body>
</html>

定义和用法

ng-style 指令为 HTML 元素添加 style 属性。

ng-style 属性值必须是对象,表达式返回的也是对象。

对象由 CSS 属性和值注册,即 key=>value 对。

语法

<element ng-style="expression"></element>

所有的 HTML 元素都支持该属性。

参数值

描述
string 表达式返回由 CSS 属性和值组成的对象。

以上就是对AngularJS ng-style 指令的资料整理,后续继续补充,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
AngularJS中的模块详解
Jan 29 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
深入理解angularjs过滤器
May 25 Javascript
javascript时间差插件分享
Jul 18 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 #Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 #Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 #Javascript
js删除Array数组中指定元素的两种方法
Aug 03 #Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 #Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 #Javascript
AngularJS基础 ng-show 指令简单示例
Aug 03 #Javascript
You might like
PHP - Html Transfer Code
2006/10/09 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
node.js中的console用法总结
2014/12/15 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
python3 与python2 异常处理的区别与联系
2016/06/19 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
Python 复平面绘图实例
2019/11/21 Python
python读取ini配置文件过程示范
2019/12/23 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
个人自我鉴定写法
2013/11/30 职场文书
某同学的自我鉴定范文
2013/12/26 职场文书
旷课检讨书1000字
2014/02/14 职场文书
网络管理专业求职信
2014/03/15 职场文书
员工保密协议书
2014/09/27 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
Java设计模式之享元模式示例详解
2022/03/03 Java/Android
Python 匹配文本并在其上一行追加文本
2022/05/11 Python