Organisieren Sie einige allgemeine Anweisungen in AngularJS

Organisieren Sie einige allgemeine Anweisungen in AngularJS_AngularJS

WBOY

Freigeben： 2016-05-16 15:54:42

Original

1272 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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)