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 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
Vuex和前端缓存的整合策略详解
May 09 Javascript
JavaScript原生数组函数实例汇总
Oct 14 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 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
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
js的event详解。
2006/09/06 Javascript
Javascript与vbscript数据共享
2007/01/09 Javascript
一句话JavaScript表单验证代码
2009/08/02 Javascript
javascript下string.format函数补充
2010/08/24 Javascript
js脚本实现数据去重
2014/11/27 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
Python入门篇之对象类型
2014/10/17 Python
Python numpy 点数组去重的实例
2018/04/18 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
公司门卫工作职责
2014/06/28 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
DIY胆机必读:各国电子管评价
2022/04/06 无线电