zoukankan      html  css  js  c++  java
  • angular中要注意的指令

    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 })
  • 相关阅读:
    【服务器】【Windows】【3】开放服务器端口
    【服务器】【Windows】【2】把jar包做成服务,在Service中管理
    FZU 1753
    poj 1017
    poj 1666
    poj 1132
    ZOJ 2562 More Divisors
    POJ 2992 Divisors
    poj 2773 happy 2006
    poj 2407 Relatives
  • 原文地址:https://www.cnblogs.com/happy1992/p/7137733.html
Copyright © 2011-2022 走看看