angular中要注意的指令
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中要注意的指令的更多相关文章
- Angular中的内置指令和自定义指令
NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...
- 在angular7中创建组件/自定义指令/管道
在angular7中创建组件/自定义指令/管道 组件 使用命令创建组件 创建组件的命令:ng generate component 组件名 生成的组件组成: 组件名.html .组件名.ts.组件名. ...
- Angular 组件与模板 - 属性指令
指令概览 在 Angular 中有三种类型的指令: 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令 属性型指令 — 改变元素.组件或其它指令的外观和行为 ...
- angular中的compile和link函数
angular中的compile和link函数 前言 这篇文章,我们将通过一个实例来了解 Angular 的 directives (指令)是如何处理的.Angular 是如何在 HTML 中找到这些 ...
- angular源码分析:angular中脏活累活的承担者之$interpolate
一.首先抛出两个问题 问题一:在angular中我们绑定数据最基本的方式是用两个大括号将$scope的变量包裹起来,那么如果想将大括号换成其他什么符号,比如换成[{与}],可不可以呢,如果可以在哪里配 ...
- angular源码分析:angular中入境检察官$sce
一.ng-bing-html指令问题 需求:我需要将一个变量$scope.x = '<a href="http://www.cnblogs.com/web2-developer/&qu ...
- angular源码分析:angular中脏活累活承担者之$parse
我们在上一期中讲 $rootscope时,看到$rootscope是依赖$prase,其实不止是$rootscope,翻看angular的源码随便翻翻就可以发现很多地方是依赖于$parse的.而$pa ...
- angular中的MVVM模式
在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用.虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(What ...
- (七)理解angular中的module和injector,即依赖注入
(七)理解angular中的module和injector,即依赖注入 时间:2014-10-10 01:16:54 阅读:63060 评论:1 收藏:0 [点 ...
随机推荐
- 多个JDK使用批处理命令切换JDK版本
本篇博客参考的链接 http://blog.csdn.net/hu199055/article/details/70145389 https://www.cnblogs.com/xdp-gacl/p/ ...
- 2017-07-20聊聊《C#本质论》
第一次接触<C#本质论>是在这个链接.那时候刚学写C#,而且它的语言风格深深吸引了我,噢对了还有它强大的IDE--VS.这个链接里的书确实不错.文中提到: 虽然这三本书都是外国原著的,但是 ...
- 实体处理模块IEntityModule
在2015年7月16日,XCode新增了实体处理模块IEntityModule,用于拦截实体对象添删改操作. 该接口参考IHttpModule设计理念,横切在实体对象的关键生命周期之中,以达到多实体类 ...
- flask动态url规则
动态URL规则 URL规则可以添加变量部分,也就是件更符合同规则的URL抽象成一个URL模式. @app.route('/item/<id>') def item(id): return ...
- 运维架构服务监控Open-Falcon
一. 介绍 监控系统是整个运维环节,乃至整个产品生命周期中最重要的一环,事前及时预警发现故障,事后提供翔实的数据用于追查定位问题.监控系统作为一个成熟的运维产品,业界有很多开源的实现可供选择.当公司刚 ...
- 远程SCP报错,报22号口错误
格式: scp root@ip地址/远程服务器文件地址 本地服务器地址 查看了半天发现无法联通,最终22端口不通 后来经过同事提示,忽然想到要经过跳板进行转发才能够登录. 想到自己配置了ssh文件 直 ...
- 关于java解析xml文件出现的问题
DOM解析xml文件 问题1:导入javax.xml.parsers.DocumentBuilderFactory出现问题,如图: 解决办法是:由于创建工程时有个默认的jre,重新创建工程改掉就解决了 ...
- 前端请求参数MD5加密校验,参数串解密
首先引入MD5加密库:=>https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js; 步骤:=>1.请求前对参数进行字典升序排序,排 ...
- 创建对象-constructor丢失的问题
fuction Person(name){ this.name=name; } Person.prototype={ sayName:function(){ return this.name; } } ...
- POJ2407-Relatives-欧拉函数
欧拉函数: 对正整数n,欧拉函数是少于或等于n的数中与n互质的数的数目. 对于一个正整数N的素数幂分解N=P1^q1*P2^q2*...*Pn^qn. Euler函数表达通式:euler(x)=x(1 ...