2015-04-09 20:36:17 +02:00
|
|
|
# .cadoles-slide-title[Les directives de base (1/5)]
|
2015-04-08 23:22:53 +02:00
|
|
|
|
|
|
|
|
**Itération avec ng-repeat: sur un tableau**
|
|
|
|
|
```html
|
|
|
|
|
<html>
|
|
|
|
|
<body ng-app="myApp">
|
|
|
|
|
<div ng-controller="MainCtrl">
|
|
|
|
|
<ul>
|
|
|
|
|
<li ng-repeat="i in items">
|
|
|
|
|
<!--
|
|
|
|
|
Des variables spéciales permettent d'accéder aux informations
|
|
|
|
|
de contexte de l'itération courante: $index, $first, $middle, $last, $even, $odd
|
|
|
|
|
-->
|
|
|
|
|
<span>{{ $index }}</span>
|
|
|
|
|
<!-- On peut accéder directement au propriétés de i à l'intérieur de la boucle -->
|
|
|
|
|
<span>{{ i.label }}</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<script src="angular.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
angular.module('myApp', [])
|
|
|
|
|
.controller('MainCtrl', ['$scope', function($scope) {
|
|
|
|
|
|
|
|
|
|
$scope.items = [
|
|
|
|
|
{ label: 'Item 1' },
|
|
|
|
|
{ label: 'Item 2' },
|
|
|
|
|
{ label: 'Item 3' },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
}]);
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
```
|
