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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
jquery获取table中的某行全部td的内容方法
Mar 08 Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 Javascript
js键盘事件的keyCode
Jul 29 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
小程序云开发实战小结
Oct 25 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 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程序
2006/10/09 PHP
php5.2.0内存管理改进
2007/01/22 PHP
php下载文件的代码示例
2012/06/29 PHP
PHP中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
Javascript 布尔型分析
2008/12/22 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
Python进行数据科学工作的简单入门教程
2015/04/01 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
python3实现磁盘空间监控
2018/06/21 Python
对Python3 序列解包详解
2019/02/16 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
python实现扫雷游戏
2020/03/03 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
时尚圣经:The Fashion Bible
2019/03/03 全球购物
行政部总经理岗位职责
2014/01/04 职场文书
个人简历求职信范文
2015/03/20 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
2016大学军训心得体会
2016/01/11 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书