Angular.js examine les conseils d'utilisation de ng-app et ng-model

Angular.js examine les conseils d'utilisation de ng-app et ng-model_AngularJS

WBOY

Libérer： 2016-05-16 15:03:53

original

1582 Les gens l'ont consulté

Structure simple de index.html dans Angular.js :

<!doctype html> 
<html ng-app> 
  <head> 
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> 
  </head> 
  <body> 
    Your name: <input type="text" ng-model="yourname" placeholder="World"> 
    <hr> 
    Hello {{yourname || 'World'}}! 
  </body> 
</html>

Copier après la connexion

L'attribut ng-app est l'instruction flag d'angular.js, qui marque la portée d'angular.js. ng-app peut être ajouté à de nombreux endroits, comme celui ci-dessus ajouté à la balise html, indiquant que le script angulaire fonctionne sur toute la page. Vous pouvez également ajouter l'attribut ng-app localement. Par exemple, l'ajout de ng-app dans un certain div indiquera que toute la zone div sera analysée à l'aide de scripts angulaires, tandis que les autres emplacements ne seront pas analysés par des scripts angulaires.
ng-model signifie créer un modèle de données. Ici, dans la zone de saisie du nom, nous définissons un modèle de données yourname. Une fois le modèle défini, nous pouvons l'appeler ci-dessous en tirant parti de {{}}. Ceci termine la liaison des données lorsque nous saisissons du contenu dans la zone de saisie, il sera synchronisé avec le bloc d'instruction Hello ci-dessous.
Le modèle de données défini par ng-model peut non seulement être utilisé dans les scénarios ci-dessus, mais peut également être largement utilisé dans de nombreuses situations.
1. Définir le filtre pour implémenter la fonction de recherche
Dans le code suivant, nous utilisons une simple définition de modèle de données + un filtre pour compléter une fonction de recherche de liste. (Il s'agit d'un exemple de code provenant du site Web chinois, vous n'avez donc pas à vous soucier d'abord des parties peu claires)

<div class="container-fluid"> 
 <div class="row-fluid"> 
  <div class="span2"> 
   Search: <input ng-model="query"> 
  </div> 
  <div class="span10"> 
   <ul class="phones"> 
    <li ng-repeat="phone in phones | filter:query"> 
     {{phone.name}} 
    <p>{{phone.snippet}}</p> 
    </li> 
   </ul> 
    </div> 
 </div> 
</div>

Copier après la connexion

Dans le code ci-dessus, la requête du modèle de données est liée à la balise d'entrée du champ de recherche. De cette manière, les informations saisies par l'utilisateur seront synchronisées avec le modèle de données de requête. Dans le li suivant, vous pouvez utiliser filter:query pour implémenter la fonction de filtrage des données dans la liste et effectuer un filtrage en fonction des informations saisies par l'utilisateur.
2. Définissez orderBy pour implémenter la fonction de tri de liste
Dans le code suivant, de la même manière que filter, orderBy permet d'ajouter une fonction de tri à la liste :

Search: <input ng-model="query"> 
Sort by: 
<select ng-model="orderProp"> 
 <option value="name">Alphabetical</option> 
 <option value="age">Newest</option> 
</select> 
<ul class="phones"> 
 <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> 
  {{phone.name}} 
  <p>{{phone.snippet}}</p> 
 </li> 
</ul>

Copier après la connexion

Ce qui précède concerne les compétences d'utilisation de ng-app et ng-model. J'espère que vous pourrez en tirer quelque chose en passant en revue le passé et en apprenant le nouveau.