English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

AngularJS Basic Tutorial

AngularJS ng-repeat instruction

AngularJS 参考手册

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<script　src="https://cdn.staticfile.org/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　=　[
　　　　"Base Tutorial Website"1",
　　　　"Base Tutorial Website"2",
　　　　"Base Tutorial Website"3",
　　　　"Base Tutorial Website"4",
　　]
});
</script>
</body>
</html>
测试看看 ‹/›

Définition et utilisation

ng-repeat L'instruction est utilisée pour itérer et afficher un nombre spécifique d'éléments HTML.

L'ensemble doit être un tableau ou un objet.

Grammaire

　　　<element　ng-repeat="expression"></element>

Tous les éléments HTML supportent cette instruction.

Valeur du paramètre

ValeurDescription
expressionL'expression définit comment itérer sur un ensemble.
Règles d'exemple d'expression:
x in records
 　 (key, value) in myObj
x in records track by $id(x)

Plus d'exemples

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<script　src="https://cdn.staticfile.org/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"　:　"Allemagne"
　　　　},
　　　　{
　　　　　　"Name"　:　"Berglunds　snabbk",
　　　　　　"Country"　:　"Suède"
　　　　},
　　　　{
　　　　　　"Name"　:　"Centro　comercial　Moctezuma",
　　　　　　"Country"　:　"Mexique"
　　　　},
　　　　{
　　　　　　"Name"　:　"Ernst　Handel",
　　　　　　"Country"　:　"Autriche"
　　　　}
　　]
});
</script>
</body>
</html>
测试看看 ‹/›
<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<script　src="https://cdn.staticfile.org/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>
测试看看 ‹/›

AngularJS 参考手册

AngularJS 参考手册AngularJS Select(选择框)