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 相关文章推荐
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
js+html制作简单验证码
Feb 16 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
使用vue实现grid-layout功能实例代码
Jan 05 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
Three.js实现3D机房效果
Dec 30 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通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
JS实现导航栏楼层特效
2020/01/01 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
使用python生成目录树
2018/03/29 Python
python日志logging模块使用方法分析
2019/05/23 Python
python导入pandas具体步骤方法
2019/06/23 Python
Python中的self用法详解
2019/08/06 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
tensorflow 环境变量设置方式
2020/02/06 Python
Python @property原理解析和用法实例
2020/02/11 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
高三自我鉴定
2013/10/23 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
Python面向对象编程之类的概念
2021/11/01 Python
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL