ng-repeatДиректива 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 = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro comercial Moctezuma",
"Ernst Handel",
]
});
</script>
</body>
Определение и использование
Директива ng-repeatповторяет набор HTML заданное количество раз.
Набор HTML будет повторяться один раз для каждого элемента коллекции.
Коллекция должна быть массивом или объектом.
Примечание. Каждому экземпляру повторения дается своя область действия, состоящая из текущего элемента.
Если у вас есть коллекция объектов, эта ng-repeatдиректива идеально подходит для создания HTML-таблицы, отображения одной строки таблицы для каждого объекта и одной таблицы данных для каждого свойства объекта. См. пример ниже.
Синтаксис
<element ng-repeat="expression"></element>
Поддерживается всеми элементами HTML.
Значения параметров
| Value | Description |
|---|---|
| expression | An expression that specifies how to loop the collection. Legal Expression examples: x in records
(key, value) in myObj |
Дополнительные примеры
Пример
Напишите одну строку таблицы для каждого элемента в массиве записей:
<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>
Пример
Напишите одну строку таблицы для каждого свойства объекта:
<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>