ng-repeat
Directiva AngularJS
Ejemplo
Escriba un encabezado para cada elemento en la matriz de registros:
<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>
Definición y uso
La ng-repeat
directiva repite un conjunto de HTML, un número determinado de veces.
El conjunto de HTML se repetirá una vez por elemento en una colección.
La colección debe ser una matriz o un objeto.
Nota: Cada instancia de la repetición tiene su propio ámbito, que consiste en el elemento actual.
Si tiene una colección de objetos, la ng-repeat
directiva es perfecta para hacer una tabla HTML, mostrando una fila de tabla para cada objeto y una tabla de datos para cada propiedad de objeto. Vea el ejemplo a continuación.
Sintaxis
<element ng-repeat="expression"></element>
Compatible con todos los elementos HTML.
Valores paramétricos
Value | Description |
---|---|
expression | An expression that specifies how to loop the collection. Legal Expression examples: x in records
(key, value) in myObj |
Más ejemplos
Ejemplo
Escriba una fila de tabla para cada elemento en la matriz de registros:
<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>
Ejemplo
Escriba una fila de tabla para cada propiedad en un objeto:
<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>