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,这几个理解起来相对容易很多,因为它们只涉及到了表现,而没 ...
随机推荐
- ASP.NET MVC Model 验证总结
http://www.wyjexplorer.cn/Post/2012/8/3/model-validation-in-aspnet-mvc3 ASP.NET MVC3中的Model是自验证的,这是通 ...
- robot-framework 利用evaluate关键字生成随机数
robot-framework 利用evaluate关键字生成随机数 最近用RF(robot-framework简称)操作MangoDB,需要直接将数据写到数据库里,又不想每次写的数据完全相同,就想到 ...
- C++练习 | 基于栈的中缀算术表达式求值(double类型
#include<iostream> #include<stack> #include<cmath> using namespace std; char ch; b ...
- CSP前模板复习
Tarjan 求强连通分量 展开查看 #include #include #include using namespace std; const int N = 1e4 + 1e3; int n, m ...
- oa_mvc_easyui_分页(4)
1.数据层的编写 NewListInfoDal.cs: GetPageEntityList方法,根据start,end取出数据 --row_number() over()函数查询 LoadEntity ...
- SQLServer 存储过程详解
Transact-SQL中的存储过程,非常类似于Java语言中的方法,它可以重复调用.当存储过程执行一次后,可以将语句缓存中,这样下次执行的时候直接使用缓存中的语句.这样就可以提高存储过程的性能. Ø ...
- leetcode 1051. Height Checker
Students are asked to stand in non-decreasing order of heights for an annual photo. Return the minim ...
- Maven将java打包成jar并且运行笔记
Maven项目打包成jar并且运行笔记 首先创建一个maven项目 运行成功后,有两种方式将项目进行打包. 第一种方式: 在IDEA编辑器中maven项目进行打包: 这里显示jar包中没有主清单属性, ...
- 两种表复制语句(SQL)
select into select语句和select into from语句 1.INSERT INTO SELECT语句 语句形式为:Insert into Table2(field1,field ...
- CssSyntaxError (2:1) Unknown word 1 | > 2 | var content = require("!!./index.css");
项目引入css文件后报错 Module build failed (from ./node_modules/_css-loader@2.1.1@css-loader/dist/cjs.js):CssS ...