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 相关文章推荐
JavaScript 快捷键设置实现代码
Mar 13 Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
淘宝搜索框效果实现分析
Mar 05 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 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
抓取YAHOO股票报价的类
2009/05/15 PHP
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
python实现八大排序算法(2)
2017/09/14 Python
Python探索之修改Python搜索路径
2017/10/25 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
python 三元运算符使用解析
2019/09/16 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
Python urllib.request对象案例解析
2020/05/11 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
2014年计算机专业个人自我评价
2014/01/19 职场文书
爱心捐款倡议书
2014/04/14 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
先进班组材料范文
2014/12/25 职场文书
离职证明格式样本
2015/06/12 职场文书
了解Redis常见应用场景
2021/06/23 Redis
聊聊redis-dump工具安装问题
2022/01/18 Redis
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL
python创建字典及相关管理操作
2022/04/13 Python