码迷,mamicode.com
首页 > 其他好文 > 详细

angular中要注意的指令

时间:2017-07-08 19:49:06      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:地址   指令   hub   log   first   angular   生成   bsp   on()   

1.ng-repeat

遍历集合,给每个元素生成模板实例,每个实例的作用域中可以用一些特殊属性,如下:

1 $index    //遍历集合的下标
2 $first   //遍历集合中的第一个对象
3 $last   //遍历集合中的最后一个对象
4 $middle   //遍历集合第一个和最后一个之间的对象
5 $even     //遍历集合的偶数对象
6 $odd     //遍历集合的奇数对象

实例:

1 <ul>
2     <li ng-repeat="char in 
3     [{‘alphabet‘: ‘K‘},
4     {‘alphabet‘: ‘A‘},
5     {‘alphabet‘: ‘V‘},
6     {‘alphabet‘: ‘L‘},
7     {‘alphabet‘: ‘E‘},
8     {‘alphabet‘: ‘Z‘}] " ng-show="$even">{{char.alphabet}}</li>
9 </ul>

2.ng-href

href和ng-href的区别在于,ng-href默认表达式生效前不要加载该资源。

看下面的例子:

 1 <ul ng-init="myHref=‘‘">
 2     <li><a ng-href="{{ myHref }}">{{linkText}}</a></li>
 3     <li><a href="{{ myHref }}">可以点击,但不一定是正确的地址</a></li>
 4 </ul>
 5 .run(function($rootScope, $timeout) {
 6     $rootScope.linkText = ‘尚未加载,您无法点击‘;
 7     $timeout(function() {
 8         $rootScope.linkText = ‘请点击‘
 9         $rootScope.myHref = ‘http://google.com‘;
10     }, 2000);
11 })

3.ng-src

大同小异,即表达式生效前不要加载该资源。

1 <img ng-src="{{imgSrc}}"/>
2 .run(function($rootScope, $timeout) {
3     $timeout(function() {
4         $rootScope.imgSrc = ‘https://octodex.github.com/images/daftpunktocat-guy.gif‘;
5     }, 2000);
6 })

 

angular中要注意的指令

标签:地址   指令   hub   log   first   angular   生成   bsp   on()   

原文地址:http://www.cnblogs.com/happy1992/p/7137733.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!