对于遍历一个数组或对象已经不陌生了,而在angularjs中也是有遍历的方法,即ng-repeat指令。
一、遍历数组
直接给例子:
a:
<ul><li ng-repeat =' number in [1,2,3]'>{{number}}</li><ul>
这样输出的结果就是依次输出1,2 ,3
b:
<!DOCTYPE html> <html lang="en" ng-app = "myapp" > <head></head> <body> <div ng-controller = "mycontroller"> <button ng-repeat = "person in persons"> {{person.name}} {{person.age}} {{ $index}} </button> </div> </body>
对应的controller
angular.module('myApp',[]) .controller(‘mycontroller’, function($scope) { $scope.persons= [{name:'张三',age:'22'},{name:李四,age:34},{name:'王五',age:'20'}]; })
会依次在页面上显示三个button,上面依次为0 张三 22 ,1 李四 34 ,2 王五 20
$index为数组的索引
相关推荐
angularjs,ng-repeat循环渲染时,无法获取dom对象
本文实例讲述了AngularJS ng-repeat指令及Ajax的应用。分享给大家供大家参考,具体如下: ng-repeat 指令用于循环输出指定次数的 HTML 元素。集合必须是数组或对象。 定义: <element ng-repeat=expression> 说明...
下面给大家分享在项目中使用ng-repeat指令实现下拉框。 1、问题背景 select下拉框里option组装成下拉框,这里利用ng-repeat指令来创建 2、实现源码 <!DOCTYPE html> <html> <head> <meta ...
本文实例讲述了AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题。分享给大家供大家参考,具体如下: 我们可以使用ng-repeat指令遍历一个JavaScript数组,当数组中有重复元素的时候,AngularJS...
ng-repeat-start与ng-repeat-end时AngularJS(1.2.x)扩展的,使用这两个指令可以灵活控制遍历形式。 例如: index.html <div class=uk-panel ng-controller=UserCtrl> <ul class=uk-list> <li ng-repeat-start=...
AngularJS ng-repeat 指令 AngularJS 实例 循环输出多个标题: <!DOCTYPE html> <html> <head> <meta charset=utf-8> [removed][removed] </head> <body ng-app=myApp ng-...
在ng-repeat中,含有动态的html,而这些html中含有自定义指令。 因为希望实现一个能够复用的table,所以定义了一个指令myStandTable,指令代码大概如下: var myCommon = angular.module("myCommon",[]); myCommon....
在使用AngularJS的ng-repeat指令时,遇到了数据重复出现的问题。 可能有的人会想到,ng-repeat迭代时,遇到重复的数据不是会报错么? 当然了,如果你迭代的是数组,而且数据类型时字符串或者数字时,ng-repeat指令就...
ng-repeat 猫头鹰旋转木马在 AngularJS ng-repeat 中初始化 Owl Carousel 的指令#下载 ##NPM npm install ng-repeat-owl-carousel --save ##鲍尔bower install ng-repeat-owl-carousel --save #Usage 将源文件添加到...
本文实例分析了AngularJS的ng-repeat指令与scope继承关系。分享给大家供大家参考,具体如下: ng-repeat指令的使用方式可以参考如下代码: <!doctype html> <html lang=en> <head> <meta ...
quick-ng-repeat, 一个更快速的替换AngularJS的重复指令 的AngularJS指令更快速地列出渲染特性浅表表( ngRepeat使用深表)动画支持特殊服务,使列表呈现在摘要循环之外在重compited列表中平滑滚动( 检查示例)大约 200...
AngularJS ng-repeat遍历输出的用法,最近需要用,就顺便发到随笔上了 <!doctype html> <html> <head> <meta charset=utf-8> <title>ng-repeat directive</title> </head>...
NULL 博文链接:https://bijian1013.iteye.com/blog/2221093
1.首先重复回顾一下ng-repeat指令 ng-repeat可以实现内容的重复显示,比如我们可以写如下代码 [removed] angular.module("myapp",[]).controller("mycontroller",function($scope){ $scope.data=[{name:"yu1",age...