AngularJS基础 ng-repeat 指令简单示例
更新时间：2016年08月03日 08:48:08 投稿：lqh
本文主要讲解AngularJS ng-repeat 指令,这里对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 指令的基础资料整理，后续继续补充。
相关文章
这篇文章主要介绍了AngularJS 实现按需异步加载实例代码的相关资料,需要的朋友可以参考下2015-10-10
这篇文章主要介绍了使用AngularJS对路由进行安全性处理的方法,AngularJS是一款高人气的JavaScript库,需要的朋友可以参考下2015-06-06
详解angularJs中关于ng-class的三种使用方式说明
本篇文章主要介绍了angularJs中关于ng-class的三种使用方式说明，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下2015-01-01
AngularJS使用自定义指令替代ng-repeat的方法
这篇文章主要介绍了另一种即具有与ng-repeat一样处理大量数据的绑定的功能，又具有超高性能的自定义方法，有需要的小伙伴们可以参考借鉴，下面来一起看看吧。2016-09-09
Angular.js跨controller实现参数传递的两种方法
这篇文章主要给大家介绍了关于Angular.js跨controller实现参数传递的两种方法，文中给出了详细的介绍和示例代码，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-02-02
使用AngularJS和PHP的Laravel实现单页评论的方法
这篇文章主要介绍了使用AngularJS和PHP的Laravel实现单页评论的方法,本文的示例是前端JavaScript和后端PHP联合编程的典范,需要的朋友可以参考下2015-06-06
下面小编就为大家带来一篇浅谈angular懒加载的一些坑。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
本文主要介绍AngularJS ng-list 指令,这里帮大家整理了ng-list指令的基本资料,并附有示例代码,有需要的小伙伴可以参考下2016-08-08
AngularJs1.x自定义指令独立作用域的函数传入参数方法
今天小编就为大家分享一篇AngularJs1.x自定义指令独立作用域的函数传入参数方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
最新评论