AngularJS ng-repeat 指令
AngularJS 教程
· 2019-04-02 06:19:28
AngularJS 实例
循环输出多个标题:
<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>
<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>
定义和用法
ng-repeat 指令用于循环输出指定次数的 HTML 元素。
集合必须是数组或对象。
语法
<element ng-repeat="expression"></element>
所有的 HTML 元素都支持该指令。
参数值
| 值 | 描述 |
|---|---|
| expression | 表达式定义了如何循环集合。 表达式实例规则: x in records
(key, value) in myObj |
更多实例
AngularJS 实例
使用数组循环输出一个表格:
<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öp",
"Country" : "Sweden"
},{
"Name" : "Centro comercial Moctezuma",
"Country" : "Mexico"
},{
"Name" : "Ernst Handel",
"Country" : "Austria"
}
]
});
</script>
<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öp",
"Country" : "Sweden"
},{
"Name" : "Centro comercial Moctezuma",
"Country" : "Mexico"
},{
"Name" : "Ernst Handel",
"Country" : "Austria"
}
]
});
</script>
AngularJS 实例
使用对象循环输出一个表格:
<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>
<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>
点击查看所有 AngularJS 教程 文章: https://codercto.com/courses/l/36.html
突破——程序员如何练就领导力
刘朋 / 电子工业出版社 / 2018-8-31 / 55.00元
内容简介： 在今日中国如雨后春笋般出现的各种新兴的互联网和软件公司中，有越来越多的技术达人凭借在技术上的优异表现而被晋升为技术团队的管理者和领导者。然而，从技术到管理——从单枪匹马的个人贡献者到一呼百应的技术团队领导者——注定是“惊险的一跃”。对于刚走上技术团队管理岗位的技术专家，你一定遇到过和本书作者当年一样的各种困惑和不适“症状”： ——我能处理好人“机”关系，但是如何处理好人际关......一起来看看 《突破——程序员如何练就领导力》 这本书的介绍吧!
