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 [点 ...
随机推荐
- nodejs 做后台的一个完整业务整理
大家知道js现在不仅仅可以写前端界面而且可以写后端的业务了,这样js就可以写一个全栈的项目.这里介绍一个nodejs + express + mongodb + bootstap 的全栈项目. 1.安 ...
- dataZoom 详细参数
dataZoom:[ //区域缩放 { id: 'dataZoomX', show:true, //是否显示 组件.如果设置为 false,不会显示,但是数据过滤的功能还存在. backgroundC ...
- 在Java Web项目中添加定时任务
在Java Web程序中加入定时任务,这里介绍两种方式:1.使用监听器注入:2.使用Spring注解@Scheduled注入. 推荐使用第二种形式. 一.使用监听器注入 ①:创建监听器类: impor ...
- 更换HomeBrew源
比较少用brew,只有之前安装Opencv的时候用过一次,后面有人问我怎么装,于是帮他研究了一下.MacOS的brew其实就是通过两个git仓库(brew和homebrew-core)来实现的源更新机 ...
- Codeforces 714A Meeting of Old Friends
A. Meeting of Old Friends time limit per test:1 second memory limit per test:256 megabytes input:sta ...
- bzoj:3397 [Usaco2009 Feb]Surround the Islands 环岛篱笆
Description 约翰在加勒比海买下地产,准备在这里的若干个岛屿上养奶牛.所以,他要给所有岛屿围上篱笆.每个岛屿都是多边形.他沿着岛屿的一条边界朝一个方向走,有时候坐船到另一个岛去.他可 ...
- 在虚拟机(VMware)中安装Linux CentOS 6.4系统(图解) 转
一.下载最新版本Linux CentOS 1.打开官网地址:http://www.centos.org/,点击Downloads->Mirrors 2.点击CentOS ...
- typedef和define具体的详细区别
1) #define是预处理指令,在编译预处理时进行简单的替换,不作正确性检查,不关含义是否正确照样带入,只有在编译已被展开的源程序时才会发现可能的错误并报错.例如: #define PI 3.141 ...
- in运算符(javascript)
in的用法,如x in y: 1.如果第二个运算数为对象,则in运算符用来检测第一个运算数是否是第二个运算数的属性名.是,返回true,否则返回false. 例: var obj = {x:1,y:2 ...
- Spark算子--flatMapValues
转载请标明出处http://www.cnblogs.com/haozhengfei/p/e7a46cecc65720997392516d553d9891.html flatMapValues--Tra ...