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. Chris Richardson微服务翻译:微服务之事件驱动的数据管理

    Chris Richardson 微服务系列翻译全7篇链接: 微服务介绍 构建微服务之使用API网关 构建微服务之微服务架构的进程通讯 微服务架构中的服务发现 微服务之事件驱动的数据管理(本文) 微服 ...

  2. JAVA进阶--ThreadPoolExecutor机制

    ThreadPoolExecutor机制 一.概述 1.ThreadPoolExecutor作为java.util.concurrent包对外提供基础实现,以内部线程池的形式对外提供管理任务执行,线程 ...

  3. random seed()函数

    用seed()生成随机数字,生成的法则与seed内部的数字相关,如果数字相同,则生成的随机数是相同的. 刷题宝上面的题目: >>> import random >>> ...

  4. 重构仿vue社区代码

    半年前根据vue社区提供的开放api制作的vue社区,功能大部分和原vue社区一样,还一些功能没做完,项目是半年前做的,已经过了半年,当时因为公司一个项目打算要vue来重构,提取小试牛刀做了个dom试 ...

  5. Codeforces-8VC Venture Cup 2016-Elimination Round-626A.暴力 626B.水题 626C.二分

    A. Robot Sequence time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  6. BZOJ2001: [Hnoi2010]City 城市建设

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2001 cdq分治+重建图. 可以保留当前一定会被选的非修改边然后把点缩起来.这样的话每次点数至 ...

  7. 基于ARM的车牌识别技术研究与实现

    在云盘里包含了我本科毕业设计的全部资料和代码.主要涉及下面摘要中的几个部分.虽然系统无法实用,但是适合机器视觉和嵌入式方向的入门.希望能对有志从事相关方向的朋友有所帮助.本人现在在深圳从事机器视觉算法 ...

  8. POJ 2387 Til the Cows Come Home(模板——Dijkstra算法)

    题目连接: http://poj.org/problem?id=2387 Description Bessie is out in the field and wants to get back to ...

  9. mybatis sql循环的使用

    foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合. foreach元素的属性主要有 item,index,collection,open,separator,close. ...

  10. ceil与intval区别

    float ceil(float value)ceil返回不小于value的最小整数,返回值仍是float型 int intval ( mixed value [, int base])    int ...