Organisez quelques instructions courantes dans AngularJS

Organisez quelques instructions courantes dans AngularJS_AngularJS

WBOY

Libérer： 2016-05-16 15:54:42

original

1272 Les gens l'ont consulté

Les directives AngularJS sont utilisées pour étendre le HTML. Ce sont des propriétés spéciales commençant par le préfixe ng-. Nous discuterons des directives suivantes :

ng-app - Cette commande démarre une application AngularJS.
ng-init - Cette directive initialise les données de l'application.
ng-model - Cette directive définit le modèle, qui est une variable utilisée dans AngularJS.
ng-repeat - Cette directive répétera l'élément HTML pour chaque élément de la collection.

directive ng-app

La directive

ng-app démarre une application AngularJS. Il définit l'élément racine. Il initialise ou démarre automatiquement l'application qui charge la page Web contenant l'application AngularJS. Il est également utilisé pour charger divers modules AngularJS dans les applications AngularJS. Dans l'exemple ci-dessous, nous définissons l'application AngularJS par défaut en utilisant l'attribut ng-app de l'élément div.

<div ng-app="">
...
</div>

Copier après la connexion

Commande ng-init

La directive ng-init initialise les données d'une application AngularJS. Il est utilisé pour mettre des valeurs dans des variables utilisées dans les applications. Dans l'exemple suivant, nous initialiserons le tableau country. Utilisez la syntaxe JSON pour définir le tableau des pays.

<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
                  {locale:'en-GB',name:'United Kingdom'},
                  {locale:'en-FR',name:'France'}]">
     
...
</div>

Copier après la connexion

directive ng-model

La directive ng-model définit les modèles/variables utilisés dans les applications AngularJS. Dans l'exemple ci-dessous, nous définissons un modèle nommé "name".

<div ng-app="">
...
<p>Enter your Name: <input type="text" ng-model="name"></p>
</div>

Copier après la connexion

directive ng-repeat

La directive

ng-repeat répète chaque élément d'une collection d'éléments HTML. Dans l'exemple ci-dessous, nous avons parcouru les pays du tableau.

<div ng-app="">
...
  <p>List of Countries with locale:</p>
  <ol>
   <li ng-repeat="country in countries">
     {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
   </li>
  </ol>
</div>

Copier après la connexion

Exemple

L'exemple suivant démontrera toutes les commandes ci-dessus.
testAngularJS.html

<html>
<title>AngularJS Directives</title>
<body>
<h1>Sample Application</h1>
<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
                  {locale:'en-GB',name:'United Kingdom'},
                  {locale:'en-FR',name:'France'}]">
  <p>Enter your Name: <input type="text" ng-model="name"></p>
  <p>Hello <span ng-bind="name"></span>!</p>
  <p>List of Countries with locale:</p>
  <ol>
   <li ng-repeat="country in countries">
     {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
   </li>
  </ol>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

Copier après la connexion

Sortie

Ouvrez textAngularJS.html dans votre navigateur Web. Entrez un nom et voyez les résultats ci-dessous.

2015616115415280.png (613×372)