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,这几个理解起来相对容易很多,因为它们只涉及到了表现,而没 ...
随机推荐
- vscode配置PHP Debug
1.先在vscode中安装PHP Debug,在设置添加“php.validate.executablePath”项,选中对应版本的php.exe. "php.validate.execut ...
- 前端实现app引导页面动画效果
插件描述:jQuery引导插件TourTip 交互式可视化指南网页上的元素.使用方法 步骤1: 将以下标记添加到您的文档的<head> 你还需要复制旁边插件的css文件夹和下载的IMG文件 ...
- HDU 1284 钱币兑换问题 (动态规划 背包方案数)
钱币兑换问题 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- 2019牛客暑期多校训练营(第二场)-E MAZE
题目链接:https://ac.nowcoder.com/acm/contest/882/E 题意:n×m的矩阵,0表示可以走,1表示墙,不能通过.有q中操作,一种是改变坐标(x,y)的状态,一种是询 ...
- Java基础(六)
面向对象 概述 生活举例 代码体验 类与对象的关系 类的定义 根据类创建对象 对象的基本使用 练习:手机类与对象 内存图:一个对象 内存图:两个对象 内存图:同一个对象 局部变量与成员变量的区别 pr ...
- c++学习笔记之类和对象(一、类定义)
类和对象是 C++ 的重要特性,它们使得 C++ 成为面向对象的编程语言. 类是创建对象的模板,一个类可以创建多个对象,每个对象都是类类型的一个变量:创建对象的过程也叫类的实例化.每个对象都是类的一个 ...
- MyBatis清空数据库表数据
<update id="truncateTable"> truncate table ${tableName} </update> <update i ...
- MySQL数据库增删改查SQL语句(2018整理集合大全)
查看数据库 show databases; 使用数据库 use 数据库名; 创建数据库 CREATE DATABASE 数据库名; 删除数据库 DROP DATABASE 数据库名; 创建表 cre ...
- EM 算法(三)-GMM
高斯混合模型 混合模型,顾名思义就是几个概率分布密度混合在一起,而高斯混合模型是最常见的混合模型: GMM,全称 Gaussian Mixture Model,中文名高斯混合模型,也就是由多个高斯分布 ...
- Java设计模式七种写法
懒汉模式-线程不安全 public class Singleton { private static Singleton instance; private Singleton (){ } publi ...