suchen

Heim >Web-Frontend >js-Tutorial >Organisieren Sie einige allgemeine Anweisungen in AngularJS_AngularJS

Organisieren Sie einige allgemeine Anweisungen in AngularJS_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 15:54:421320Durchsuche

AngularJS-Direktiven werden zum Erweitern von HTML verwendet. Dies sind spezielle Eigenschaften, die mit dem Präfix ng- beginnen. Wir werden die folgenden Richtlinien besprechen:

  • ng-app – Dieser Befehl startet eine AngularJS-Anwendung.
  • ng-init – Diese Direktive initialisiert Anwendungsdaten.
  • ng-model – Diese Direktive definiert das Modell, bei dem es sich um eine Variable handelt, die in AngularJS verwendet wird.
  • ng-repeat – Diese Anweisung wiederholt das HTML-Element für jedes Element in der Sammlung.

NG-App-Richtlinie

Die

ng-app-Direktive startet eine AngularJS-Anwendung. Es definiert das Wurzelelement. Es initialisiert oder startet automatisch die Anwendung, die die Webseite lädt, die die AngularJS-Anwendung enthält. Es wird auch verwendet, um verschiedene AngularJS-Module in AngularJS-Anwendungen zu laden. Im folgenden Beispiel definieren wir die Standard-AngularJS-Anwendung mithilfe des ng-app-Attributs des div-Elements. 

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

ng-init-Befehl

Die ng-init-Direktive initialisiert die Daten einer AngularJS-Anwendung. Es wird verwendet, um Werte in Variablen einzugeben, die in Anwendungen verwendet werden. Im folgenden Beispiel initialisieren wir das Länder-Array. Verwenden Sie die JSON-Syntax, um das Länder-Array zu definieren. 

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

ng-model-Direktive

ng-model-Direktive definiert Modelle/Variablen, die in AngularJS-Anwendungen verwendet werden. Im folgenden Beispiel definieren wir ein Modell mit dem Namen „name“. 

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

ng-repeat-Anweisung

Die

ng-repeat-Direktive wiederholt jedes Element in einer Sammlung von HTML-Elementen. Im folgenden Beispiel haben wir die Array-Länder durchlaufen. 

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

Beispiel

Das folgende Beispiel demonstriert alle oben genannten Befehle.
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>

Ausgabe

Öffnen Sie textAngularJS.html in Ihrem Webbrowser. Geben Sie einen Namen ein und sehen Sie sich die Ergebnisse unten an.

2015616115415280.png (613×372)

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：Bootstrap grundlegende Javascript-LernfähigkeitenNächster Artikel：Bootstrap grundlegende Javascript-Lernfähigkeiten

In Verbindung stehende Artikel

Mehr sehen