formations/javascript/angular/directives-1.md

967 B

.cadoles-slide-title[Les directives de base (1/6)]

Itération avec ng-repeat: sur un tableau

<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>