style,ng-style, ng-attr-style的对比
 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl"> <h1 ng-style="myObj">ng-style 属性值必须是对象，表达式返回的也是对象。</h1>
<h1 ng-style="mystyleObject()">ng-style属性值必须是对象，表达式返回的也是对象。</h1>
<h1 style="color:blue;background-color:coral;height:80px !important"> style使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。</h1>
<h1 ng-attr-style="{{mystyle()}}">ng-attr-style支持!important属性。</h1>
<h1 style="{{mystyle()}}">style支持!important属性</h1> <script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.mystyle = function(){
return "color:blue;background-color:coral;"+"height:80px !important";
}
$scope.mystyleObject = function(){
return {
"color" : "blue",
"background-color" : "coral",
"height": "80px !important"
};
}
$scope.myObj = {
"color" : "blue",
"background-color" : "coral",
"height": "80px !important"
};
});
// 如果一个属性通过“ngAttr”前缀绑定，那么在绑定期间将会把没有前缀的属性应用到对应的属性上。这种方式允许你绑定其他浏览器会立刻执行的属性（例如，SVG元素的circle[cx]属性）。在使用"ngAttr"时，“$interpolate”的“allOrNothing”标识符会被使用，所以如果字符串插值的计算结果是undefined，这个属性将会被移除并且不会添加到元素上。
</script>
</body>
</html>
style,ng-style, ng-attr-style的对比的更多相关文章
- 深入理解Android 自定义attr Style styleable以及其应用
相信每一位从事Android开发的猿都遇到过需要自己去自定义View的需求,如果想通过xml指定一些我们自己需要的参数,就需要自己声明一个styleable,并在里面自己定义一些attr属性,这个过程 ...
- WPF中Style文件引用另一个Style文件中的样式
第1种方法: 直接在当前Style文件(*.xaml)文件中使用: <ResourceDictionary.MergedDictionaries>来进行合并 <!-- 关键是注意so ...
- android在style中使用自定义属性 error: style attribute not found.
异常: Error:(128, 5) error: style attribute 'com.honghui0531.prebiotics.view:attr/item_right_icon_src' ...
- ch5-Class 与 Style 绑定(v-bind:class v-bind:style)
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式. 因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串. 不过,字符串拼接麻烦又易错.因此,在 v-b ...
- paper:synthesizable finit state machine design techniques using the new systemverilog 3.0 enhancements之output encoded style with registered outputs(Good style)
把输出跟状态编码结合起来,即使可以省面积又是寄存器输出.但是没有讲解如何实现这种高效的编码.
- Angular6之ng build | ng build --aot | ng build --prod 差异
由于写了大半年的项目终于要告一段落并且即将进行第二阶段优化开发,emmm 基础版本已经二十多个模块了,必不可少的优化是很重要的,尽管项目上使用多层嵌套懒加载,但是在首屏加载的时候,任然很慢啊,因为一直 ...
- jQuery中attr和prop方法的区别
jQuery中attr和prop方法的区别。 http://my.oschina.net/bosscheng/blog/125833 http://www.javascript100.com/?p=8 ...
- 对jquery的 attr()和prop()理解
jquery1.6版本后引入了prop()方法,很多时候总是混淆attr()与prop()这俩,下面分析一下这俩的区别 在此之前,先来了解一下html 的attribute和property,因为jq ...
- jquery中prop()和attr()的区别
相比attr,prop是1.6.1才新出来的,两者从中文意思理解,都是获取/设置属性的方法(attributes和properties).只是,window或document中使用.attr()方法在 ...
- jquery 属性操作 attr( ) prop（）css( ）区别
一 attr () 和 prop( ) 操作属性 谈谈我的总结: 1 2 1 属性的定义,根据W3C手册所述:属性包括,标准属性:id class style title 语言属性 lang dir以 ...
随机推荐
- 传纸条---（dp）
题目描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个mmm行nnn列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就无法直接交谈了. ...
- RabbitMQ之路由键转发消息
RabbitMQ学习 参考:https://www.jianshu.com/p/6b62a0ed2491 消息队列:目前流行的有 Kafka.RabbitMQ.ActiveMQ等 功能:为了解决消息的 ...
- juqery 回车事件 回车操作 回车搜索
html <form class="search_wrap" method="post" action=""> <div ...
- thinkphp 多图片上传 单图片上传
不管是单图片上传还是多图片上传都必须要引用这两个js 下载地址 链接:http://pan.baidu.com/s/1eStkUt0 密码:asvo <script src="Publ ...
- python全栈开发 * 36知识点汇总 * 180721
36 操作系统的发展史 进程一.手工操作--穿孔卡片 1.内容: 程序员将对应于程序和数据的已穿孔的纸带(或卡片)装入输入机,然后启动输入机把程序和数据输入计算机内存,接着通过控制 台开关启动程序针对 ...
- 转载http协议
转载自:https://blog.csdn.net/weixin_38051694/article/details/77777010 1.说一下什么是Http协议 对器客户端和 服务器端之间数据传输的 ...
- Eclipse 02： 安装SVN插件
1.下载最新的Eclipse,我的版本是3.7.2 indigo(Eclipse IDE for Java EE Developers)版 如果没有安装的请到这里下载安装:http://ecli ...
- 使用iostat查看磁盘使用情况
Ⅰ.iostat安装 [root@VM_42_63_centos ~]# yum install -y sysstat Ⅱ.玩一手 [root@VM_42_63_centos ~]# iostat - ...
- Java加载dll或so库文件的路径 java.library.path
1. Java的System.load 和 System.loadLibrary都可以用来加载库文件 2.例如你可以这样载入一个windows平台下JNI库文件: System.load(&q ...
- 7.0-uC/OS-III中断管理
1.CPU的中断处理 理器通常有多个中断源. 例如, UART中断. DMA中断. ADC中断.定时器中断等. 2.中断器件标志中断处理器,然后中断处理器将优先级最高的中断提交给CPU. 现在的中断控 ...