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


Posted in Javascript onAugust 03, 2016

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 指令的基础资料整理,后续继续补充。

Javascript 相关文章推荐
jQuery找出网页上最高元素的方法
Mar 20 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
好好了解一下Cookie(强烈推荐)
Jun 14 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
JS实现给json数组动态赋值的方法示例
Mar 19 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
详解Node.js模板引擎Jade入门
Jan 19 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
vue-rx的初步使用教程
Sep 21 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 #Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 #Javascript
Highcharts学习之坐标轴
Aug 02 #Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 #Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 #Javascript
Highcharts入门之基本属性
Aug 02 #Javascript
js检查是否关闭浏览器的方法
Aug 02 #Javascript
You might like
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
ThinkPHP模型详解
2015/07/27 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
js 异步处理进度条
2010/04/01 Javascript
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
Python遍历目录的4种方法实例介绍
2015/04/13 Python
django实现分页的方法
2015/05/26 Python
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
python中defaultdict的用法详解
2017/06/07 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
python多线程扫描端口(线程池)
2019/09/04 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
运动会稿件300字
2014/02/14 职场文书
少年闰土教学反思
2014/02/22 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
Minikube搭建Kubernetes集群
2022/03/31 Servers