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 相关文章推荐
禁止F5等快捷键的JS代码
Mar 06 Javascript
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
小程序云开发实战小结
Oct 25 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 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&amp;java(一)
2006/10/09 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
js自定义回调函数
2015/12/13 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
Python中内建函数的简单用法说明
2016/05/05 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
python匿名函数的使用方法解析
2019/10/10 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
火灾现场处置方案
2014/05/28 职场文书
开发房地产协议书
2014/09/14 职场文书
教师自查自纠材料
2014/10/14 职场文书
迁户口计划生育证明
2014/10/19 职场文书
银行自荐信怎么写
2015/03/05 职场文书
税务会计岗位职责
2015/04/02 职场文书
甲午大海战观后感
2015/06/02 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
公开致歉信
2019/06/24 职场文书