Structure simple de l'index.html dans angular.js:
<! doctype html> <html ng-app> <ead> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </ script> </ head> <body> Votre nom: <intrut type = "text" ng-model = "yourname" PlaceHolder = "world"> <hr> 'Monde'}}! </ body> </html>
La propriété NG-App est une déclaration de drapeau d'Angular.js, qui marque la portée d'Angular.js. Ng-App peut être ajouté à de nombreux endroits, comme ci-dessus, à la balise HTML, indiquant que le script angulaire fonctionne pour toute la page. Vous pouvez également ajouter un attribut NG-App localement. Par exemple, en ajoutant NG-App dans une certaine div, cela signifie que toute la zone Div sera analysée à l'aide de scripts angulaires, tandis que les scripts angulaires ne seront pas analysés à d'autres endroits.
Le modèle NG signifie construire un modèle de données. Ici, dans la zone d'entrée du nom d'entrée, nous définissons un modèle de données de votre nom. Après avoir défini le modèle, nous pouvons passer des appels ci-dessous en utilisant {{}}. Cela complète la liaison des données. Lorsque nous entrons du contenu dans la zone d'entrée, il sera synchronisé avec le bloc de déclaration HELLO-CONSEMBLE ci-dessous.
Le modèle de données défini par le modèle NG peut non seulement être utilisé dans les scénarios ci-dessus, mais peut également être largement utilisé dans de nombreux cas.
1. Configurer le filtre pour réaliser la fonction de recherche
Dans le code suivant, nous pouvons compléter une fonction de recherche de liste à l'aide d'une définition simple de modèle de données + filtre. (Ceci est l'exemple de code sur le site Web chinois, donc je n'ai pas besoin d'être clair.)
<div> <div> <div> Recherche: <entrée ng-model = "query"> </ div> <div> <ul> <li ng-repeat = "Phone dans les téléphones | Filter: Query"> {{phone.name}} <p> {{téléphoneDans le code ci-dessus, la requête du modèle de données est liée à la balise d'entrée de la zone de recherche. De cette façon, les informations saisies par l'utilisateur seront synchronisées dans le modèle de données de requête. Dans le LI suivant, l'utilisation du filtre: Query peut implémenter la fonction de filtrage de données dans la liste et le filtre en fonction des informations d'entrée de l'utilisateur.
2. Définissez OrderBy pour implémenter la fonction de tri de la liste
Dans le code suivant, comme filtre, utilisez OrderBy pour ajouter une fonction de tri à la liste:
Recherche: <entrée ng-model = "Query"> Trier par: <sélectionner ng-model = "orderprop"> <option value = "name"> alphabetics </ option> <option value = "age"> NOUVEAU </ option> </ select> <ul> <li ng-repeat = {téléphone dans les téléphones | filtre: query | OrderBy: OrderProp "> {{téléphone. <p> {{phone.snippet}} </p> </li> </ul>Ce qui précède concerne les techniques d'utilisation de NG-App et Ng-Model. Nous passons en revue l'ancien et apprenons le nouveau. J'espère que tout le monde pourra en tirer quelque chose.