ng-class、ng-style、ng-href、ng-attr-title
2016-01-10 22:10
423 查看
在angularjs中,设置样式:
点击aaa,可链接到百度;把鼠标箭头放到第二个aaa上,会出现标题“hello”;
注意:在angular中用ng-class设置内部样式时,样式格式为: 如:ng-class="{red:true}",后面有个true;
外部样式与class类似;
用ng-style设置样式时,与style没什么大的区别
<style> .red{ background: red; } .yellow{ background: yellow; } div a { text-decoration: none; } </style> <script src="js/angular.min.js"></script> <script> var app = angular.module("myApp",[]); app.controller("myCtrl", function($scope){ $scope.text = "hello"; $scope.sClass = "{red:true}"; //$scope.url = "http://www.baidu.com"; $scope.url = "http://www.baidu.com"; }) </script>
<div ng-controller="myCtrl"> <div ng-class="{{sClass}}">{{text}}</div> <div ng-class="{red:true,yellow:true}">{{text}}</div> <div ng-style="{background:'red',color:'white'}">{{text}}</div> <div> <a ng-href="{{url}}">aaaaa</a><br/> <a ng-attr-href="{{url}}" ng-attr-title="{{text}}" ng-attr-class="" ng-attr-style="">aaaaa</a> </div> </div>样式如下:
点击aaa,可链接到百度;把鼠标箭头放到第二个aaa上,会出现标题“hello”;
注意:在angular中用ng-class设置内部样式时,样式格式为: 如:ng-class="{red:true}",后面有个true;
外部样式与class类似;
用ng-style设置样式时,与style没什么大的区别
相关文章推荐
- COM 组件设计与应用(三)——数据类型
- java集合框架总结
- 高速网络下的http协议优化
- TNS-12547 Linux Error: 104: Connection reset by pe (转载)
- 没事,就当故事听吧
- Java多线程学习(吐血超详细总结)
- Eclipse执行片段
- HDU 1561 The more, The Better
- const 使用一二
- css实现在div中垂直水平居中
- 最终个人作业
- poj-1125-Stockbroker Grapevine spfa模板
- javascript的特点
- rtmp发送H264及aac的音视频
- 使用adapter的notifyDataSetChanged时列表数据没有刷新
- 雷锋举报了快播
- 浅析多线程
- synchronized 用法总结
- Servlet3.0注解新特性笔记 (转载IBM)
- HPU:1879畅通工程(kruskal)