AngularJS教程 ng-style 指令简单示例  更新时间:2016年08月03日 09:30:25   投稿:lqh   本文主要介绍AngularJS ng-style 指令,这里对ng-style 指令做了详细的基础资料整理,并附有代码示例,有需要的朋友可以参考下 AngularJS ng-style 指令 AngularJS 实例 使用AngularJS添加样式,使用 CSS key=>value 对象格式: 菜鸟教程 定义和用法 ng-style 指令为 HTML 元素添加 style 属性。 ng-style 属性值必须是对象,表达式返回的也是对象。 对象由 CSS 属性和值注册,即 key=>value 对。 语法 所有的 HTML 元素都支持该属性。 参数值 值 描述 string 表达式返回由 CSS 属性和值组成的对象。 以上就是对AngularJS ng-style 指令的资料整理,后续继续补充,谢谢大家对本站的支持! 您可能感兴趣的文章: AngularJS实现树形结构(ztree)菜单示例代码 AngularJS使用自定义指令替代ng-repeat的方法 AngularJS中关于ng-class指令的几种实现方式详解 AngularJS中过滤器的使用与自定义实例代码 AngularJs 动态加载模块和依赖 AngularJS 指令的交互详解及实例代码 AngularJS 表达式详解及实例代码 AngularJS 自定义指令详解及实例代码 AngularJS 自定义过滤器详解及实例代码 AngularJS 中的Promise — $q服务详解 AngularJS ng-style中使用filter AngularJS ng-style 指令 相关文章 angularjs+bootstrap实现自定义分页的实例代码 本篇文章主要介绍了angularjs+bootstrap实现自定义分页的实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-06-06 使用Angular-CLI构建NPM包的方法 这篇文章主要介绍了使用Angular-CLI构建NPM包的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-09-09 angular4笔记系列之内置指令小结 这篇文章主要介绍了angular4笔记系列之内置指令小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-11-11 AngularJS 控制器 controller的详解 这篇文章主要介绍了AngularJS 控制器 controller的详解的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下 2017-10-10 ionic+AngularJs实现获取验证码倒计时按钮 本篇文章主要介绍了ionic+AngularJs实现获取验证码倒计时按钮,具有一定的参考价值,有兴趣的可以了解一下。 2017-04-04 使用Angular.js开发的注意事项 这篇文章主要记录了一些在学习和使用angular.js踩到的坑和需要注意的点,方便以后自己查阅,也给同样遇到这些问题的朋友们一些帮助,有需要的朋友们下面来一起看看吧。 2016-10-10 angular内容投影详解 这篇文章主要为大家介绍了angular内容投影,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助 2021-12-12 angular内置provider之$compileProvider详解 下面小编就为大家带来一篇angular内置provider之$compileProvider详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-09-09 AngularJS中实现用户访问的身份认证和表单验证功能 这篇文章主要介绍了AngularJS中实现用户访问的身份认证及表单验证功能的方法,Angular是Google开发的一款浏览器端的高人气JavaScript框架,需要的朋友可以参考下 2016-04-04 angularjs获取到My97DatePicker选中的值方法 今天小编就为大家分享一篇angularjs获取到My97DatePicker选中的值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 最新评论

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 指令的资料整理,后续继续补充,谢谢大家对本站的支持!

您可能感兴趣的文章:

  • AngularJS实现树形结构(ztree)菜单示例代码
  • AngularJS使用自定义指令替代ng-repeat的方法
  • AngularJS中关于ng-class指令的几种实现方式详解
  • AngularJS中过滤器的使用与自定义实例代码
  • AngularJs 动态加载模块和依赖
  • AngularJS 指令的交互详解及实例代码
  • AngularJS 表达式详解及实例代码
  • AngularJS 自定义指令详解及实例代码
  • AngularJS 自定义过滤器详解及实例代码
  • AngularJS 中的Promise — $q服务详解
  • AngularJS ng-style中使用filter
张贴在3