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 相关文章推荐
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
javascript实现checkbox复选框实例代码
Jan 10 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
VUE动态生成word的实现
Jul 26 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实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
python格式化字符串实例总结
2014/09/28 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
亲子读书活动方案
2014/02/22 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
西安大雁塔导游词
2015/02/10 职场文书
材料员岗位职责
2015/02/10 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
安全生产标语口号
2015/12/26 职场文书
浅谈Node的内存泄露问题
2022/05/06 NodeJs
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL