1.ng-repeat

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

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

实例:

 <ul>
<li ng-repeat="char in
[{'alphabet': 'K'},
{'alphabet': 'A'},
{'alphabet': 'V'},
{'alphabet': 'L'},
{'alphabet': 'E'},
{'alphabet': 'Z'}] " ng-show="$even">{{char.alphabet}}</li>
</ul>

2.ng-href

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

看下面的例子:

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

3.ng-src

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

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

angular中要注意的指令的更多相关文章

  1. Angular中的内置指令和自定义指令

    NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...

  2. 在angular7中创建组件/自定义指令/管道

    在angular7中创建组件/自定义指令/管道 组件 使用命令创建组件 创建组件的命令:ng generate component 组件名 生成的组件组成: 组件名.html .组件名.ts.组件名. ...

  3. Angular 组件与模板 - 属性指令

    指令概览 在 Angular 中有三种类型的指令: 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令 属性型指令 — 改变元素.组件或其它指令的外观和行为 ...

  4. angular中的compile和link函数

    angular中的compile和link函数 前言 这篇文章,我们将通过一个实例来了解 Angular 的 directives (指令)是如何处理的.Angular 是如何在 HTML 中找到这些 ...

  5. angular源码分析:angular中脏活累活的承担者之$interpolate

    一.首先抛出两个问题 问题一:在angular中我们绑定数据最基本的方式是用两个大括号将$scope的变量包裹起来,那么如果想将大括号换成其他什么符号,比如换成[{与}],可不可以呢,如果可以在哪里配 ...

  6. angular源码分析:angular中入境检察官$sce

    一.ng-bing-html指令问题 需求:我需要将一个变量$scope.x = '<a href="http://www.cnblogs.com/web2-developer/&qu ...

  7. angular源码分析:angular中脏活累活承担者之$parse

    我们在上一期中讲 $rootscope时,看到$rootscope是依赖$prase,其实不止是$rootscope,翻看angular的源码随便翻翻就可以发现很多地方是依赖于$parse的.而$pa ...

  8. angular中的MVVM模式

    在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用.虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(What ...

  9. (七)理解angular中的module和injector,即依赖注入

    (七)理解angular中的module和injector,即依赖注入 时间:2014-10-10 01:16:54      阅读:63060      评论:1      收藏:0      [点 ...

随机推荐

  1. 多个JDK使用批处理命令切换JDK版本

    本篇博客参考的链接 http://blog.csdn.net/hu199055/article/details/70145389 https://www.cnblogs.com/xdp-gacl/p/ ...

  2. 2017-07-20聊聊《C#本质论》

    第一次接触<C#本质论>是在这个链接.那时候刚学写C#,而且它的语言风格深深吸引了我,噢对了还有它强大的IDE--VS.这个链接里的书确实不错.文中提到: 虽然这三本书都是外国原著的,但是 ...

  3. 实体处理模块IEntityModule

    在2015年7月16日,XCode新增了实体处理模块IEntityModule,用于拦截实体对象添删改操作. 该接口参考IHttpModule设计理念,横切在实体对象的关键生命周期之中,以达到多实体类 ...

  4. flask动态url规则

    动态URL规则 URL规则可以添加变量部分,也就是件更符合同规则的URL抽象成一个URL模式. @app.route('/item/<id>') def item(id): return ...

  5. 运维架构服务监控Open-Falcon

    一. 介绍 监控系统是整个运维环节,乃至整个产品生命周期中最重要的一环,事前及时预警发现故障,事后提供翔实的数据用于追查定位问题.监控系统作为一个成熟的运维产品,业界有很多开源的实现可供选择.当公司刚 ...

  6. 远程SCP报错,报22号口错误

    格式: scp root@ip地址/远程服务器文件地址 本地服务器地址 查看了半天发现无法联通,最终22端口不通 后来经过同事提示,忽然想到要经过跳板进行转发才能够登录. 想到自己配置了ssh文件 直 ...

  7. 关于java解析xml文件出现的问题

    DOM解析xml文件 问题1:导入javax.xml.parsers.DocumentBuilderFactory出现问题,如图: 解决办法是:由于创建工程时有个默认的jre,重新创建工程改掉就解决了 ...

  8. 前端请求参数MD5加密校验,参数串解密

    首先引入MD5加密库:=>https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js; 步骤:=>1.请求前对参数进行字典升序排序,排 ...

  9. 创建对象-constructor丢失的问题

    fuction Person(name){ this.name=name; } Person.prototype={ sayName:function(){ return this.name; } } ...

  10. POJ2407-Relatives-欧拉函数

    欧拉函数: 对正整数n,欧拉函数是少于或等于n的数中与n互质的数的数目. 对于一个正整数N的素数幂分解N=P1^q1*P2^q2*...*Pn^qn. Euler函数表达通式:euler(x)=x(1 ...