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 相关文章推荐
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
判断iOS、Android以及PC端的示例代码
Nov 15 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
浅谈JS中几种轻松处理'this'指向方式
Sep 16 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
swiper实现异形轮播效果
Nov 28 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
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
ext jquery 简单比较
2010/04/07 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
Javascript调用C#代码
2011/01/17 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
Python切片用法实例教程
2014/09/08 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
教师对学生的评语
2014/04/28 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
党性分析自查总结
2014/10/14 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS
Spring Boot实现文件上传下载
2022/08/14 Java/Android