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 [点 ...
随机推荐
- [转载]使用awk进行数字计算,保留指定位小数
对于在Shell中进行数字的计算,其实方法有很多,但是常用的方法都有其弱点: 1.bc bc应该是最常用的Linux中计算器了,简单方便,支持浮点. [wangdong@centos715-node1 ...
- LeetCode第[4]题(Java):Median of Two Sorted Arrays 标签:Array
题目难度:hard There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median ...
- MYSQL:alter语句中change和modify的区别
您可以使用CHANGE old_col_namecolumn_definition子句对列进行重命名.重命名时,需给定旧的和新的列名称和列当前的类型.例如:要把一个INTEGER列的名称从a变更到b, ...
- Erlang内存吃紧之解决思路
首先使用erlang:memory()确定是哪个部分内存吃紧,根据输出的内容,比对内存占用大小,有针对性地进行分析.在erlang系统里内存的单位为word,通过erlang:system_info( ...
- c/s与b/s 动态网站与静态网站 (网站编码统一“UTF-8”)
1.c/s和b/s 第一张图是b/s 可以随时随地的浏览 (在服务器增加网页就能增加功能,只要改变网页就能使用户同步更新,共享性也强,开发也简单,在广域网和局域网都能建造b/s结构,然后通过int ...
- HDU5137 删点 最短路
How Many Maos Does the Guanxi Worth Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 512000/5 ...
- [学习OpenCV攻略][001][Ubuntu安装及配置]
root登入配置 1.sudo passwd root 2.su - root 3.vim /etc/lightdm/lightdm.conf [SeatDefaults] user-session= ...
- JQuery的deferred对象学习总结
什么是deferred? 可以帮助我们按规定的顺序执行函数,比如说我们ajax请求数据之后,对dom进行数据填充,那我们就要先执行完ajax,拿到数据之后才能进行dom数据填充,所以这就是一个顺序执行 ...
- 如何利用vue和php做前后端分离开发?
新手上路,前端工程师,刚毕业参加工作两个月,上面让我用vue搭建环境和php工程师一起开发,做前后端分离,然而我只用过简单的vue做一些小组件的经验,完全不知道怎样和php工程师配合,ps: php那 ...
- 在Vue项目使用quill-editor带样式编辑器(更改插入图片和视频)
vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大. 插入视频是直接弹框输入URL地址,某些需求下我们需要让用户去本地选择自 ...