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 相关文章推荐
可输入的下拉框
Jun 19 Javascript
Javascript调试工具(下载)
Jan 09 Javascript
javascript 禁止复制网页
Jun 11 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
Vue2 模板template的四种写法总结
Feb 23 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 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中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
jQuery技巧总结
2011/01/01 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
JS作用域深度解析
2016/12/29 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
js实现点击烟花特效
2020/10/14 Javascript
python中argparse模块用法实例详解
2015/06/03 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
JSF界面控制层技术
2013/06/17 面试题
法学院方阵解说词
2014/01/29 职场文书
会计毕业生自荐书
2014/06/12 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
2014年团支书工作总结
2014/11/14 职场文书
刑事和解协议书范本
2014/11/19 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python