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 [点 ...
随机推荐
- 【vue系列之三】从一个vue-pdf-shower,说说vue组件和npm包
前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...
- linux报错:命令未找到
前段时间看到一个比较好玩的项目:[musicbox](https://github.com/darknessomi/musicbox) 开始用git clone安装,输入命令无法运行.开始以为安装有问 ...
- Zabbix实战-简易教程--技巧一(操作类技巧)
一.常用操作技巧 1.克隆 监控项.模板.触发器都可以进行克隆.其中,模板克隆又分为克隆和完全克隆.完全克隆会将LLD也一起复制一份,就是和之前的模板一模一样,而模板的克隆只是克隆监控项,不复制低层次 ...
- fiddler抓手机报文的配置指南
前言 1.fiddler大名鼎鼎的抓包工具,而且支持重发,自动解码报文之类. 2.做爬虫时经常遇到需要抓移动端(手机/pad等)报文的情况. 网上各种资料比较,下面这篇是最准确的,转载自csdn:ht ...
- ActionBar+Fragment实现顶部标签页
用ActionBar的TABS模式,和Fragment实现程序顶部的标签页切换. 一. MainActivity public class MainActivity extends A ...
- Maven适配多种运行环境的打包方案
项目从开发到部署会历经多个运行环境,如开发环境.测试环境和生产环境,不同环境中项目的配置文件通常也会不同,典型的如数据库连接配置.我们当然不希望每次部署打包前都去修改配置文件以适配环境,利用Maven ...
- 使用python写天气预告
先去YY天气注册一个账号,然后就能用API了 http://www.yytianqi.com/ # encoding=utf-8import urllib.requestimport jsonimpo ...
- [bzoj3955] [WF2013]Surely You Congest
首先最短路长度不同的人肯定不会冲突. 对于最短路长度相同的人,跑个最大流就行了..当然只有一个人就不用跑了 看起来会T得很惨..但dinic在单位网络里是O(m*n^0.5)的... #include ...
- STOI补番队互测#2
Round2轮到我出了>_<(目测总共10人参加 实际共七人) 具体情况: #1: KPM,360 #2:ccz181078,160 #3:child,150 可惜KPM没看到第一题样例里 ...
- TypeScript笔记 3--基础类型
强类型是TypeScript值得称赞的特性,对于很多后端开发者来说是绝对的福利,加上静态检查使得我们可以在开发态就可以发现很多问题. TypeScript中的类型和JavaScript差不多,下面我们 ...