style,ng-style, ng-attr-style的对比

时间:2022-08-27 19:52:24
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的对比的更多相关文章

  1. 深入理解Android 自定义attr Style styleable以及其应用

    相信每一位从事Android开发的猿都遇到过需要自己去自定义View的需求,如果想通过xml指定一些我们自己需要的参数,就需要自己声明一个styleable,并在里面自己定义一些attr属性,这个过程 ...

  2. WPF中Style文件引用另一个Style文件中的样式

    第1种方法: 直接在当前Style文件(*.xaml)文件中使用: <ResourceDictionary.MergedDictionaries>来进行合并 <!-- 关键是注意so ...

  3. android在style中使用自定义属性 error&colon; style attribute not found&period;

    异常: Error:(128, 5) error: style attribute 'com.honghui0531.prebiotics.view:attr/item_right_icon_src' ...

  4. ch5-Class 与 Style 绑定&lpar;v-bind&colon;class v-bind&colon;style&rpar;

    数据绑定一个常见需求是操作元素的 class 列表和它的内联样式. 因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串. 不过,字符串拼接麻烦又易错.因此,在 v-b ...

  5. paper&colon;synthesizable finit state machine design techniques using the new systemverilog 3&period;0 enhancements之output encoded style with registered outputs&lpar;Good style&rpar;

    把输出跟状态编码结合起来,即使可以省面积又是寄存器输出.但是没有讲解如何实现这种高效的编码.

  6. Angular6之ng build &vert; ng build --aot &vert; ng build --prod 差异

    由于写了大半年的项目终于要告一段落并且即将进行第二阶段优化开发,emmm 基础版本已经二十多个模块了,必不可少的优化是很重要的,尽管项目上使用多层嵌套懒加载,但是在首屏加载的时候,任然很慢啊,因为一直 ...

  7. jQuery中attr和prop方法的区别

    jQuery中attr和prop方法的区别。 http://my.oschina.net/bosscheng/blog/125833 http://www.javascript100.com/?p=8 ...

  8. 对jquery的 attr&lpar;&rpar;和prop&lpar;&rpar;理解

    jquery1.6版本后引入了prop()方法,很多时候总是混淆attr()与prop()这俩,下面分析一下这俩的区别 在此之前,先来了解一下html 的attribute和property,因为jq ...

  9. jquery中prop&lpar;&rpar;和attr&lpar;&rpar;的区别

    相比attr,prop是1.6.1才新出来的,两者从中文意思理解,都是获取/设置属性的方法(attributes和properties).只是,window或document中使用.attr()方法在 ...

  10. jquery 属性操作 attr&lpar; &rpar; prop()css&lpar; )区别

    一 attr () 和 prop( ) 操作属性 谈谈我的总结: 1 2 1 属性的定义,根据W3C手册所述:属性包括,标准属性:id class style title 语言属性 lang dir以 ...

随机推荐

  1. Python 多线程教程:并发与并行

    转载于: https://my.oschina.net/leejun2005/blog/398826 在批评Python的讨论中,常常说起Python多线程是多么的难用.还有人对 global int ...

  2. windows server域的概念以及wmic&lpar;centos上命令&rpar;

    wmic访问在域中的计算机.其中ops\administrator为域用户名,也可以写作ops.com\administrator.ops是域名ops.com的简写,是MS的NetBIOS一套吗? . ...

  3. while练习:输入一个班级的人数,然后依次输入学员成绩,计算班级学员的平均成绩和总成绩。

    Console.WriteLine("请输入班级的总人数:"); int count = int.Parse(Console.ReadLine()); ;//声明一个循环变量来记录 ...

  4. 移植最新u-boot(裁剪和修改默认参数)之韦东山笔记

    1.下载.建立source insight工程.编译.烧写.如果无运行分析原因 tar xjf u-boot-2012.04.01.tar.bz2 cd u-boot-2012.04.01 make ...

  5. YII2数据库操作出现类似Database Exception – yii&bsol;db&bsol;Exception SQLSTATE

    yii2安装后,连接数据库,必须要安装pdo_mysql扩展

  6. jquery之stop&lpar;&rpar;的用法

    // 为了看效果,随意写的动画 $('#animater').animate({ 'right':-800 }, 3000).animate({'font-size':'16px'},'normal' ...

  7. Python中的isinstance函数

    isinstance是Python中的一个内建函数 语法: isinstance(object, classinfo)   如果参数object是classinfo的实例,或者object是class ...

  8. Android动态布局,并动态为TextView控件设置drawableLeft、drawableRight等属性加入图标

    注:(图中每个条目和图标都是由代码动态生成) 代码动态布局,并须要为每个条目设置图标,此时用到了 android:drawableLeft="@drawable/icon"  父x ...

  9. C&num; 简化优化if&sol;switch 表驱动法

    表示这个很强大 字典加反射,搞定多window的switch public partial class MainWindow : Window { Dictionary<string, Type ...

  10. TouchSlide滚动插件BUG

    TouchSlide滚动切换效果时 nextCell设定自己的class名后无效,需要用".next"或不设置