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 相关文章推荐
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
jquery插件 autoComboBox 下拉框
Dec 22 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
js完整倒计时代码分享
Sep 18 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
JS document对象简单用法完整示例
Jan 14 Javascript
Vue实现可移动水平时间轴
Jun 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
php中防止伪造跨站请求的小招式
2011/09/02 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
详解Vite的新体验
2021/02/22 Javascript
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
python实现排序算法
2014/02/14 Python
深入理解Python变量与常量
2016/06/02 Python
Python文件和流(实例讲解)
2017/09/12 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
如何查看python关键字
2021/01/17 Python
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
大学生自我鉴定
2013/12/16 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
孙振耀退休感言
2015/08/01 职场文书
财务管理制度范本
2015/08/04 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers