AngularJS基础 ng-repeat 指令简单示例

AngularJS ng-repeat 指令

AngularJS 实例

循环输出多个标题:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-repeat="x in records">{{x}}</h1>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
 $scope.records = [
 "菜鸟教程1",
 "菜鸟教程2",
 "菜鸟教程3",
 "菜鸟教程4",
 ]
});
</script>

</body>
</html>

定义和用法

ng-repeat 指令用于循环输出指定次数的 HTML 元素。

集合必须是数组或对象。

语法

<element ng-repeat="expression"></element>

所有的 HTML 元素都支持该指令。

参数值

描述
expression 表达式定义了如何循环集合。

表达式实例规则:

x in records

(key, value) in myObj

x in records track by $id(x)

更多实例

AngularJS 实例

使用数组循环输出一个表格:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">

<table ng-controller="myCtrl" border="1">
<tr ng-repeat="x in records">
 <td>{{x.Name}}</td>
 <td>{{x.Country}}</td>
</tr>
</table>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
 $scope.records = [
 {
  "Name" : "Alfreds Futterkiste",
  "Country" : "Germany"
 },
 {
  "Name" : "Berglunds snabbk",
  "Country" : "Sweden"
 },
 {
  "Name" : "Centro comercial Moctezuma",
  "Country" : "Mexico"
 },
 {
  "Name" : "Ernst Handel",
  "Country" : "Austria"
 }
 ]
});
</script>

</body>
</html>

运行结果:

Alfreds Futterkiste Germany
Berglunds snabbk Sweden
Centro comercial Moctezuma Mexico
Ernst Handel Austria

AngularJS 实例

使用对象循环输出一个表格:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">

<table ng-controller="myCtrl" border="1">
<tr ng-repeat="(x, y) in myObj">
 <td>{{x}}</td>
 <td>{{y}}</td>
</tr>
</table>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
 $scope.myObj = {
 "Name" : "Alfreds Futterkiste",
 "Country" : "Germany",
 "City" : "Berlin"
 }
});
</script>

</body>
</html>

运行结果:

Name Alfreds Futterkiste
Country Germany
City Berlin

以上就是对AngularJS ng-repeat 指令的基础资料整理,后续继续补充。

时间: 2016-07-31

AngularJS入门(用ng-repeat指令实现循环输出

循环输出列表很多项目在web服务端做,前端做好模版后后端写jsp代码,双方需要紧密合作,分清责任.有些项目由后端提供restful方法,前端用ajax调用自己循环,这种一般是大把的jquery拼字符串,太不直观,有人搞出了js模板,也没好到哪里去. 用AngularJS就爽多了,语法和JSP类似: <!doctype html> <html ng-app> <head> <meta charset="utf-8"> <title&g

AngularJs ng-repeat 嵌套如何获取外层$index

一个真实项目的例子是遍历表格的行和列, 每一行需要显示当前是第几行, 我立刻想到用$index, 简直就如同砍瓜切菜般, 一切都那么行云流水, 简直太容易了, 于是有了下面这段代码. <!-- repeat data row --> <tr ng-repeat="row in rows track by row.id"> <td ng-repeat="col in row.columns track by col.id"> <

Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍

ng-repeat-start与ng-repeat-end时AngularJS(1.2.x)扩展的,使用这两个指令可以灵活控制遍历形式. 例如: index.html <div class="uk-panel" ng-controller="UserCtrl"> <ul class="uk-list uk-list-striped"> <li ng-repeat-start="user in users&q

AngularJS实现ajax请求的方法

本文实例讲述了AngularJS实现ajax请求的方法.分享给大家供大家参考,具体如下: [HTML 代码] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1"> &

实例详解angularjs和ajax的结合使用

这是一篇关于easyui配合ajax使用的文章,顺带介绍angularjs的使用以及让你感受到angularjs的威力.网上对于ajax 的文也是多如牛毛 .我就不直接从那种原生的httpxmlrequest 对象的js 写起了哈.看那种东西也存粹是了解 高层的东西是怎么来的 原理是啥真正做的时候写那种东西 不是扯淡么 你叼你技术牛逼整站的代码你全用那种写.html js 这种东西最开始设计出来就没考虑周全就是坨屎.还好现在有各种框架 可以帮助我们更容易的把这坨屎做的更美味.也还好由于互联网事业

AngularJS使用ng-repeat指令实现下拉框

AngularJs 的 ng-repeat 让我们非常方便的遍历数组生成 Dom 元素,但是使用不当也会有性能问题.下面给大家分享在项目中使用ng-repeat指令实现下拉框. 1.问题背景 select下拉框里option组装成下拉框,这里利用ng-repeat指令来创建 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之

AngularJS ng-repeat数组有重复值的解决方法

前言 大家都知道默认在ng-repeat的时候每一个item都要保证是唯一的,否则console就会打出error告诉你哪个key/value是重复的. 如: $scope.items = [ 'red', 'blue', 'yellow', 'white', 'blue' ]; 这个数组blue就重复了,html这么遍历它 <li ng-repeat="item in items">{{ item }}</li> 控制台就会抛出一个错误: 点击错误链接到Ang

在AngularJS中使用AJAX的方法

AngularJS提供$http控制,可以作为一项服务从服务器读取数据.服务器可以使一个数据库调用来获取记录. AngularJS需要JSON格式的数据.一旦数据准备好,$http可以用以下面的方式从服务器得到数据. function studentController($scope,$http) { var url="data.txt"; $http.get(url).success( function(response) { $scope.students = response;

AngularJS ng-repeat指令及Ajax的应用实例分析

本文实例讲述了AngularJS ng-repeat指令及Ajax的应用.分享给大家供大家参考,具体如下: ng-repeat 指令用于循环输出指定次数的 HTML 元素.集合必须是数组或对象. 定义: <element ng-repeat="expression"></element> 说明:experssion表达式定义了如何循环集合.常用的如:x in records 下面通过一个例子,来说明ng-repeat如何绘制一个表格: <div ng-ap

AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】

本文实例讲述了AngularJS与服务器Ajax交互操作.分享给大家供大家参考,具体如下: AngularJS从Web服务器请求资源都是通过Ajax来完成,所有的操作封装在$http服务中,$http服务是只能接收一个参数的函数,这个参数是一个对象,用来完成HTTP请求的一些配置,函数返回一个对象,具有success和error两个方法. 用法如下: $http({method:'post',url:'loginAction.do' }).success(function(data,status

Angularjs的ng-repeat中去除重复数据的方法

本文实例讲述了Angularjs的ng-repeat中去除重复数据的方法.分享给大家供大家参考,具体如下: 一.JS: ngApp.filter('unique', function () { return function (collection, keyname) { var output = [], keys = []; angular.forEach(collection, function (item) { var key = item[keyname]; if (keys.index

Java实现数组去除重复数据的方法详解

本文实例讲述了Java实现数组去除重复数据的方法.分享给大家供大家参考,具体如下: 前一段时间被面试问到:如果一个数组中有重复元素,用什么方法可以去重?一时间会想到用一种方法,但是后来查阅资料后发现,有好多方法可以实现,现在就总结一下,比较简单的几种. 一.用List集合实现 int[] str = {5, 6, 6, 6, 8, 8, 7,4}; List<Integer> list = new ArrayList<Integer>(); for (int i=0; i<s

MSSql简单查询出数据表中所有重复数据的方法

本文实例讲述了MSSql简单查询出数据表中所有重复数据的方法.分享给大家供大家参考,具体如下: 这里直接给出下面的例子: SELECT * FROM SYS_LogContent slc WHERE slc.LogInfo_ID IN ( SELECT slc2.LogInfo_ID FROM SYS_LogContent slc2 GROUP BY slc2.LogInfo_ID HAVING COUNT(*)>1 ) 简单说明: 关键代码在于上面的括号中.要想查询出所有重复的数据,可以按照某

详解JavaScript数组和字符串中去除重复值的方法

原理在代码中表现得非常清晰,我们直接来看代码例子: var ages = array.map(function(obj) { return obj.age; }); ages = ages.filter(function(v,i) { return ages.indexOf(v) == i; }); console.log(ages); //=> [17, 35] function isBigEnough(element) { return element >= 10; } var filte

如何去除Java中List集合中的重复数据

1.循环list中的所有元素然后删除重复 public class duplicatRemoval { public static List removeDuplicate(List list){ for(int i=0;i<list. size()-1;i++){ for(int j=list.size()-1;j>i;j--){ if(list. get(j). equals(list.get(i))){ list.remove(j); } } } return list; } } 总结:

MySQL 去除重复数据实例详解

MySQL 去除重复数据实例详解 有两个意义上的重复记录,一是完全重复的记录,也即所有字段均都重复,二是部分字段重复的记录.对于第一种重复,比较容易解决,只需在查询语句中使用distinct关键字去重,几乎所有数据库系统都支持distinct操作.发生这种重复的原因主要是表设计不周,通过给表增加主键或唯一索引列即可避免. select distinct * from t; 对于第二类重复问题,通常要求查询出重复记录中的任一条记录.假设表t有id,name,address三个字段,id是主键,有重

Java替换int数组中重复数据的方法示例

本文实例讲述了Java替换int数组中重复数据的方法.分享给大家供大家参考,具体如下: package test; import java.util.HashSet; public class TestList { /** * 根据传递过来的参数过滤掉重复数据 * @param number:需要过滤掉的数据 * @return:筛选好的新数组 */ public static int[] Filter(int[] number){ HashSet<Integer> hs=new HashSe

JS实现的数组去除重复数据算法小结

本文实例讲述了JS实现的数组去除重复数据算法.分享给大家供大家参考,具体如下: 在JS中经常会遇到去除数组中重复数据的需求,在此介绍四种算法以实现JS数组去重的功能. 1. 速度最快算法:对象键值对法 实现思路:新建一js对象以及新数组,遍历传入数组时,判断值是否为js对象的键,不是的话给对象新增该键并放入新数组. //注意点: 判断 是否为js对象键时,会自动对传入的键执行"toString()",不同的键可能会被误认为一样:例如: a[1].a["1"] .解决

mysql优化小技巧之去除重复项实现方法分析【百万级数据】

本文实例讲述了mysql优化小技巧之去除重复项实现方法.分享给大家供大家参考,具体如下: 说到这个去重,脑仁不禁得一疼,尤其是出具量比较大的时候.毕竟咱不是专业的DB,所以嘞,只能自己弄一下适合自己去重方法了. 首先按照常规首段,使用having函数检查重复项,完事一个一个的删除.不要问我having检测重复项的sql咋写,你懂得哈...这个在只有几条重复的时候还可以.要是几千上万条不同数据重复,那咋办... 完事呢,咱就考虑了,用having函数查询的时候,原始sql如下: select `n

Django 解决distinct无法去除重复数据的问题

今天需要使用Django查询一列的字段(不含重复),搞了一上午,发现这样的事情:如图: 得到的数据几乎是相等的,没有区别. 但是仔细看会发现:下面的数据比起上面的还是少了一个. 解决办法: django的distinct在使用之前必须先使用order_by方法排序,如图: 这样就完美解决了这个问题. 补充知识:Distinct和Group by去除重复字段记录 重复记录 有两个意义,一是完全重复的记录,也即所有字段均重复的记录 二是部分关键字段重复的记录,比如Name字段重复,而其他字段不一定重