Ejemplo
Escribe una cabecera para cada elemento de la matriz 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 snabbkop",
"Centro
comercial Moctezuma",
"Ernst
Handel",
]
});
</script>
</body>
Inténtalo tú mismo " Definición y Uso
El ng-repeat Directiva repite un conjunto de HTML, un número determinado de veces.
El conjunto de HTML se repetirá una vez por artículo en una colección.
La colección debe ser una matriz o un objeto.
Nota: Cada instancia de la repetición se da su propio ámbito, que consisten en el elemento actual.
Si usted tiene una colección de objetos, el ng-repeat Directiva es perfecto para hacer una tabla HTML, donde se presentan fila de una tabla para cada objeto, y una tabla de datos para cada objeto de propiedad. Consulte el siguiente ejemplo.
Sintaxis
< element ng-repeat=" expression "></ element >Con el apoyo de todos los elementos HTML.
Los valores de los parámetros
| 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
Escribe una fila de la tabla para cada elemento de la matriz 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 snabbkop",
"Country" : "Sweden"
},{
"Name" : "Centro comercial Moctezuma",
"Country" : "Mexico"
},{
"Name" : "Ernst Handel",
"Country" : "Austria"
}
]
});
</script>
Inténtalo tú mismo " Ejemplo
Escribe una fila de la tabla para cada propiedad de 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>
Inténtalo tú mismo "