ng-reapte指令遍历

如果想知道当前遍历的下标,也就是数据源中的第几个,可以用$index
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.container{
width: 100%;
height: 100%;
}
.container img{
width: 150px;
height: 100px;
}
span{
display: block;
width: 100%;
height: 100px;
}
</style> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head>
<body>
<div data-ng-app="" data-ng-init="names=[
{
url:'./1.jpg'
},
{
url:'./1.jpg'
}
,
{
url:'./1.jpg'
}
,
{
url:'./1.jpg'
}
,
{
url:'./1.jpg'
}]"
>
<span></span>
<img data-ng-repeat="x in names" ng-src={{x.url}} alt="">
</div>
</ul>
</body>
</html>
ng-reapte指令遍历的更多相关文章
- Angular CLI ng常用指令整理
一.组件创建 ng generate component heroes 二.运行项目 ng serve --open //--open 立即打开 三.创建指令 ng g directive my-ne ...
- [译]ng指令中的compile与link函数解析 转
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...
- ng-repeat指令中使用track by子语句解决重复数据遍历的错误
用ng-repeat指令遍历一个javascript数组,当数组中有重复元素的时候,angularjs会报错,这是因为ng-Repeat不允许collection中存在两个相同Id的对象. 对于数字或 ...
- ng 指令的自定义、使用
1.创建和使用var app = angular.module('myApp',['ng']);app.directive('指令名称',func); 自定义指令的命名:驼峰式,有两部分构成,前缀一般 ...
- 走进AngularJs(五)自定义指令----(下)
自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定 ...
- angularjs指令中的compile与link函数详解(转)
http://www.jb51.net/article/58229.htm 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link, ...
- 【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- angular指令(二)--内置指令
一.基础ng 属性指令: ng-href ng-src ng-disabled ng-checked ng-readonly ng-selected ng-class ng-styl ...
- 走进AngularJs(四)自定义指令----(中)
上一篇简单介绍了自定义一个指令的几个简单参数,restrict.template.templateUrl.replace.transclude,这几个理解起来相对容易很多,因为它们只涉及到了表现,而没 ...
随机推荐
- web端 微软 RDLC 报表插件 宽大于高 横向打印失效 解决方案
起因于系统报表工具使用的RDLC,本地测试一直使用的纵向打印,未测试过横向打印
- 阿里云服务器挖矿脚本bioset攻击解决
1.问题出现 一大早刚起床,阿里云就给我发了一条短信,提醒我服务器出现紧急安全事件:挖矿程序 阿里云“贴心”地提供了解决方法,不过需要购买企业版的安全服务,本着能自己动手就不花钱原则自己搞了起来 于是 ...
- 云数据库 Redis 版
首先观看视频简介 云数据库 Redis 版是一项易于部署和管理的按需数据库服务,与 Redis 协议兼容.云数据库 Redis 版通过从内存缓存中检索数据而提供高速数据读写功能,并通过同时使用内存和硬 ...
- std::tr1::function和bind组件
C++中std::tr1::function和bind 组件的使用 在C++的TR1中(Technology Report)中包含一个function模板类和bind模板函数,使用它们可以实现类似函数 ...
- thinkphp5.1 关于加载静态资源路径问题
和thinkphp5.0不一样,thinkphp5.1的 thinkphp5.0的 直接在config.php文件中加入代码: <?phpreturn [ 'view_replace_str' ...
- vue cli3项目发布在apache www/vue目录下并配置history路由
注意:vue项目打包后默认是指向服务器的根路径(比如apache默认www目录是根路径,当然也可以修改),这种情况不需要做路径的配置,只需要做history配置,如果不是发布到根路径而是www/vue ...
- idea自定义注释
类配置位置: 方法配置位置 配置内容 * * @Author *** * @Date $date$ $time$ $param$ * @return $return$ * @Description * ...
- Windows 2008 R2阿里云安全基线检查
设置密码使用期限策略在管理工具打开本地安全策略,打开路径:安全设置\帐户策略\密码策略,将密码最长使用期限设置为30-180之间,建议值为90,将密码最短使用期限设置为1-14之间,建议值为7. 风险 ...
- ElasticSearch工作原理与优化
elasticsearch设计的理念就是分布式搜索引擎,底层其实还是基于lucene的,通过倒排索引的方式快速查询.比如一本书的目录是索引,然后快速找到每一章的的文本内容这种叫正向索引:而如果一件衣服 ...
- Centos7环境下Docker容器的安装与卸载
Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.开发者在笔记本上编译测试通过的容器可以批量地在生产环境中部署,包括VMs(虚拟机).bare metal. ...