Detaillierte Erläuterung der AngularJS-Syntax_AngularJS

Der grundlegende Betriebsprozess von Vorlagen und Daten ist wie folgt:

Benutzer fordert Bewerbungsstartseite an
Der Browser des Benutzers stellt eine HTTP-Verbindung zum Server her und lädt dann die Seite index.html, die die Vorlage
enthält Angular wird in die Seite geladen, wartet auf das Laden der Seite und sucht nach der ng-app-Direktive, die zum Definieren der Grenzen der Vorlage
verwendet wird Angular durchläuft die Vorlage, um die angegebenen und verbindlichen Beziehungen zu finden, die eine Reihe von Aktionen auslösen: Registrieren von Listenern, Ausführen einiger DOM-Operationen und Abrufen von Initialisierungsdaten vom Server. Abschließend startet die Anwendung und konvertiert die Vorlage in eine DOM-Ansicht
Stellen Sie eine Verbindung zum Server her, um andere Daten zu laden, die dem Benutzer angezeigt werden müssen

Text anzeigen

Einer verwendet die Form {{}}, z. B. {{greeting}} und der zweite ng-bind="greeting"

Verwenden Sie nicht gerenderte Seiten. Für Indexseiten wird empfohlen, die erste Methode zu verwenden

Formulareingabe

Code kopieren Der Code lautet wie folgt:

Start: //Funktion beim Ändern aufrufen
Empfehlung: {{funding.needed}}

In manchen Fällen möchten wir nicht sofort handeln, sobald sich etwas ändert, sondern müssen abwarten. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

//ng-submit
Start:
Empfehlung: {{funding.needed}}
                                                                                                                                                                                                            Mein Startup finanzieren!

非表单提交型的交互, 以click为例

复制代码 代码如下:

   
   
   


   

        Start:
        Empfehlung: {{funding.needed}}
        Finanziere mein Startup!
        Zurücksetzen
   

列表、表格以及其他迭代型元素

ng-repeat会通过$index返回当前引用的元素序号。 示例代码如下:

复制代码 代码如下:

   
   
   


   
       
           
           
           
       
   

{{$index 1}}

{{student.name}}

{{student.score}}

隐藏与显示
ng-show和ng-hide功能是等价的,但是运行效果正好相反.

复制代码 代码如下:

<script><br> Funktion DeathrayMenuController($scope) {<br> $scope.menuState = {show:false};//Ändern Sie hier zu menuState.show = false und der Effekt wird nicht angezeigt. In Zukunft ist es besser, Variablen innerhalb von {}<br> zu deklarieren $scope.toggleMenu = function() {<br> $scope.menuState.show = !$scope.menuState.show;<br> };<br> }<br> </script>

Menü umschalten

• Stun


• Disintegrate


• Aus Verlauf löschen

CSS-Klassen und -Stile

Sowohl ng-class als auch ng-style können einen Ausdruck akzeptieren. Das Ergebnis der Ausdrucksausführung kann einer der folgenden Werte sein:

Eine Zeichenfolge, die CSS-Klassennamen darstellt, getrennt durch Leerzeichen

CSS-Klassennamen-Array
Zuordnung des CSS-Klassennamens zu einem booleschen Wert
Das Codebeispiel lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

<script><br> Funktion HeaderController($scope) {<br> $scope.isError = false;<br> $scope.isWarning = false;<br> $scope.showError = function() {<p>           $scope.messageText = "Fehler!!!!"<br>           $scope.isError = true;<br>           $scope.isWarning = false;<br> }<br> </p> $scope.showWarning = function() {<p>           $scope.messageText = "Warnung!!!"<br>           $scope.isWarning = true;<br>           $scope.isError = true;<br> }<br> }<br> </script>

{{messageText}}

Fehler
Warnung

Zuordnung von CSS-Klassennamen zu booleschen Werten

Der Beispielcode lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

<script><br> Funktionsrestaurant($scope) {<br> $scope.list = [{name:"The Handsome",cuisine:"BBQ"},{name:"Green",cuisine:"Salads"},{name:"House",cuisine:'Seafood'}]; <p> $scope.selectRestaurant = function(row) {<br>                  $scope.selectedRow = row;<br> }<br> }<br> </script>



//Zuordnung von CSS-Klassennamen zu booleschen Werten Wenn der Wert des Modellattributs selectedRow in ng-repeat gleich $index ist, wird der ausgewählte Stil auf diese Zeile
festgelegt