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得到XML某节点的子节点个数的脚本
Oct 11 Javascript
js Function类型
Dec 04 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
javascript实现获取服务器时间
May 19 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
Vue elementui字体图标显示问题解决方案
Aug 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
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
PHP实现文件上传与下载
2020/08/28 PHP
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
js简单的分页器插件代码实例
2019/09/11 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python返回真假值(True or False)小技巧
2015/04/10 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
英国计算机商店:Technextday
2019/12/28 全球购物
环保公益广告语
2014/03/13 职场文书
荆州古城导游词
2015/02/06 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
Python import模块的缓存问题解决方案
2021/06/02 Python
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA
Vue router配置与使用分析讲解
2022/12/24 Vue.js