AngularJS je m'y mets !

Directive ngRepeat et ngShow

La directive ngRepeat permet de créer de nouveaux éléments du DOM. C'est une directive que vous utiliserez souvent. Voici un exemple :

<div ng-app>
	 <div ng-init="voitures = [
		{marque:'Renault', couleur:'verte'},
		{marque:'Mercedes', couleur:'rouge'},
		{marque:'Rolls', couleur:'or'},
		{marque:'Ferrari', couleur:'rouge'}
		]">
		J'ai {{voitures.length}} voitures :
		<ul>
			<li ng-repeat="voiture in voitures">
				Une {{voiture.marque}} {{voiture.couleur}}.
			</li>
		</ul>
	</div>
</div>
J'ai 4 voitures :
  • Une Renault verte.
  • Une Mercedes rouge.
  • Une Rolls or.
  • Une Ferrari rouge.

La directive ngShow permet d'afficher ou de ne pas afficher l'élément dans lequel elle est selon une valeur booléenne. Prenons le même exemple que précédemment mais en sélectionnant les voitures rouges :

<div ng-app>
	 <div ng-init="voitures = [
		{marque:'Renault', couleur:'verte'},
		{marque:'Mercedes', couleur:'rouge'},
		{marque:'Rolls', couleur:'or'},
		{marque:'Ferrari', couleur:'rouge'}
		]">
		J'ai des voitures rouges :
		<ul>
			<li ng-repeat="voiture in voitures" ng-show="voiture.couleur == 'rouge'">
				Une {{voiture.marque}}.
			</li>
		</ul>
	</div>
</div>	
J'ai des voitures rouges :
  • Une Mercedes.
  • Une Ferrari.

La directive ngRepeat possède quelques propriétés spéciales bien pratiques. On a par exemple la propriété $index qui donne la valeur de l'index :

<div ng-app>
	 <div ng-init="voitures = [
		{marque:'Renault', couleur:'verte'},
		{marque:'Mercedes', couleur:'rouge'},
		{marque:'Rolls', couleur:'or'},
		{marque:'Ferrari', couleur:'rouge'}
		]">
		J'ai {{voitures.length}} voitures :
		<ul>
			<li ng-repeat="voiture in voitures">
				[{{$index + 1}}] Une {{voiture.marque}} {{voiture.couleur}}.
			</li>
		</ul>
</div>
J'ai 4 voitures :
  • [1] Une Renault verte.
  • [2] Une Mercedes rouge.
  • [3] Une Rolls or.
  • [4] Une Ferrari rouge.
Précédent

Retour à l'accueil...