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 相关文章推荐
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
DOM事件探秘篇
Feb 15 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 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 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
js实现列表按字母排序
2020/08/11 Javascript
python友情链接检查方法
2015/07/08 Python
python语言中with as的用法使用详解
2018/02/23 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
如何教少儿学习Python编程
2020/07/10 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
如何定义一个可复用的服务
2014/09/30 面试题
会计专业推荐信
2013/10/29 职场文书
10的分与合教学反思
2014/04/30 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
世界文化遗产导游词
2015/02/13 职场文书
教师个人教学反思
2016/02/23 职场文书
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL