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 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
初试jQuery EasyUI 使用介绍
Apr 01 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
Angular5集成eventbus的示例代码
Jul 19 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入门小知识
2008/03/24 PHP
PHP include_path设置技巧分享
2011/07/03 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
jQuery基础知识小结
2014/12/22 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
Python线性回归实战分析
2018/02/01 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
python基于socket函数实现端口扫描
2020/05/28 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
浅析HTML5 Landmark
2020/09/11 HTML / CSS
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
复古服装:RetroStage
2019/05/10 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
村庄绿化方案
2014/05/07 职场文书
员工年终自我评价
2014/09/14 职场文书
我是特种兵观后感
2015/06/11 职场文书
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL