suchen

Heim >Web-Frontend >js-Tutorial >Angular.js überprüft Tipps zur Verwendung von ng-app und ng-model_AngularJS

Angular.js überprüft Tipps zur Verwendung von ng-app und ng-model_AngularJS

WBOY
WBOYOriginal
2016-05-16 15:03:531613Durchsuche

Einfache Struktur von index.html in 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>

ng-app-Attribut ist die Flag-Anweisung von angle.js, die den Bereich von angle.js markiert. ng-app kann an vielen Stellen hinzugefügt werden, wie oben zum HTML-Tag hinzugefügt, was anzeigt, dass das Angular-Skript auf der gesamten Seite funktioniert. Sie können das ng-app-Attribut auch lokal hinzufügen. Wenn Sie beispielsweise ng-app innerhalb eines bestimmten Div hinzufügen, wird der gesamte Div-Bereich mit Angular-Skripten analysiert, während andere Orte nicht mit Angular-Skripten analysiert werden.
ng-model bedeutet den Aufbau eines Datenmodells. Hier definieren wir im Eingabefeld zur Eingabe des Namens ein yourname-Datenmodell. Sobald das Modell definiert ist, können wir es unten aufrufen, indem wir {{}} nutzen. Damit ist die Datenbindung abgeschlossen. Wenn wir Inhalte in das Eingabefeld eingeben, wird dieser mit dem Hello-Anweisungsblock unten synchronisiert.
Das von ng-model definierte Datenmodell kann nicht nur in den oben genannten Szenarien verwendet werden, sondern kann auch in vielen Situationen weit verbreitet sein.
1. Filter festlegen, um die Suchfunktion zu implementieren
Im folgenden Code verwenden wir eine einfache Datenmodelldefinition + Filter, um eine Listensuchfunktion zu vervollständigen. (Dies ist ein Beispielcode von der chinesischen Website, Sie müssen sich also nicht zuerst um die unklaren Teile kümmern) 

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

Im obigen Code ist die Datenmodellabfrage an das Eingabe-Tag des Suchfelds gebunden. Auf diese Weise werden die vom Benutzer eingegebenen Informationen mit dem Abfragedatenmodell synchronisiert. Im folgenden LI können Sie filter:query verwenden, um die Datenfilterfunktion in der Liste zu implementieren und eine Filterung basierend auf den Eingabeinformationen des Benutzers durchzuführen.
2. Stellen Sie orderBy ein, um die Listensortierfunktion zu implementieren
Im folgenden Code wird orderBy auf die gleiche Weise wie ein Filter verwendet, um der Liste eine Sortierfunktion hinzuzufügen: 

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>

Oben geht es um die Nutzungsfähigkeiten von ng-app und ng-model. Ich hoffe, Sie können etwas daraus gewinnen, indem Sie die Vergangenheit Revue passieren lassen und Neues lernen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js Zeitunterschied-Berechnungscode [einschließlich Berechnung, Tage, Stunden, Minuten, Sekunden]_Javascript-KenntnisseNächster Artikel：js Zeitunterschied-Berechnungscode [einschließlich Berechnung, Tage, Stunden, Minuten, Sekunden]_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen