AngularJS => Eingebaute Richtlinien

Winkelausdrücke - Text vs. Nummer

Dieses Beispiel zeigt, wie Angular-Ausdrücke ausgewertet werden, wenn type="text" und type="number" für das Eingabeelement verwendet werden. Betrachten Sie den folgenden Controller und die folgende Ansicht:

Regler

 var app = angular.module('app', []);

 app.controller('ctrl', function($scope) {
     $scope.textInput = {
         value: '5'
     };     
     $scope.numberInput = {
         value: 5
     };
 });

Aussicht

<div ng-app="app" ng-controller="ctrl">
    <input type="text" ng-model="textInput.value">
    {{ textInput.value + 5 }}
    <input type="number" ng-model="numberInput.value">
    {{ numberInput.value + 5 }}
</div>

Bei der Verwendung von + in einem Ausdruck gebunden eingegeben Text, wird der Betreiber die Saiten (erstes Beispiel) verketten, 55 auf dem Bildschirm angezeigt wird * .
Bei der Verwendung von + in einem Ausdruck zu Nummerneingabe gebunden, kehrt die Bedienperson die Summe der Zahlen (zweites Beispiel), 10 auf dem Bildschirm angezeigt wird * .

* - Bis der Benutzer den Wert im Eingabefeld ändert, ändert sich die Anzeige danach entsprechend.

Arbeitsbeispiel

ngRepeat

ng-repeat ist eine integrierte Anweisung in Angular, mit der Sie ein Array oder ein Objekt iterieren und ein Element für jedes Element in der Auflistung einmal wiederholen können.

Wiederholen Sie ein Array

<ul>
    <li ng-repeat="item in itemCollection">
       {{item.Name}}
    </li>
</ul>

Woher:
item = einzelner Artikel in der Sammlung
itemCollection = Das Array, das Sie durchlaufen

Wiederholen Sie ein Objekt

<ul>
    <li ng-repeat="(key, value) in myObject">
       {{key}} : {{value}}
    </li>
</ul>

Woher:
key = der Name der Eigenschaft
value = der Wert der Eigenschaft
myObject = das Objekt, das Sie durchlaufen

Filtern Sie Ihren Wiederholungsvorgang nach Benutzereingaben

<input type="text" ng-model="searchText">
<ul>
    <li ng-repeat="string in stringArray | filter:searchText">
       {{string}}
    </li>
</ul>

Woher:
searchText = Der Text, nach dem der Benutzer die Liste filtern möchte
stringArray = ein Array von Strings, zB ['string', 'array']

Sie können die gefilterten Elemente auch an anderer Stelle anzeigen oder referenzieren, indem Sie der Filterausgabe einen Alias mit as aliasName .

<input type="text" ng-model="searchText">
<ul>
    <li ng-repeat="string in stringArray | filter:searchText as filteredStrings">
       {{string}}
    </li>
</ul>
<p>There are {{filteredStrings.length}} matching results</p>

ng-repeat-start und ng-repeat-end

Um mehrere DOM-Elemente durch Definieren eines Start- und Endpunkts zu ng-repeat-start können Sie die Direktiven ng-repeat-start und ng-repeat-end .

<ul>
    <li ng-repeat-start="item in [{a: 1, b: 2}, {a: 3, b:4}]">
        {{item.a}}
    </li>
    <li ng-repeat-end>
        {{item.b}}
    </li>
</ul>

Ausgabe:

ng-repeat-start mit ng-repeat-end .

Variablen

ng-repeat macht diese Variablen auch innerhalb des Ausdrucks verfügbar

Variable	Art	Einzelheiten
`$index`	Nummer	Entspricht dem Index der aktuellen Iteration ($ index ==== 0 wird beim ersten iterierten Element als wahr ausgewertet; siehe `$first` ).
`$first`	Boolean	Wird beim ersten iterierten Element als wahr ausgewertet
`$last`	Boolean	Bewertet am letzten iterierten Element als wahr
`$middle`	Boolean	Wird als wahr ausgewertet, wenn das Element zwischen `$first` und `$last`
`$even`	Boolean	Wertet bei einer geradzahligen Iteration den `$index%2===0` true (entspricht `$index%2===0` ).
`$odd`	Boolean	Wird bei einer ungeradzahligen Iteration als wahr `$index%2===1` (entspricht `$index%2===1` )

Überlegungen zur Leistung

Das Rendern von ngRepeat kann langsam werden, besonders wenn Sie große Sammlungen verwenden.

Wenn die Objekte in der Auflistung über eine Bezeichner-Eigenschaft verfügen, sollten Sie immer track by dem Bezeichner statt nach dem gesamten Objekt, der Standardfunktion, nachverfolgen. Wenn keine Kennung vorhanden ist, können Sie immer den integrierten $index .

<div ng-repeat="item in itemCollection track by item.id">
<div ng-repeat="item in itemCollection track by $index">

Umfang von ngRepeat

ngRepeat immer einen isolierten ngRepeat muss sorgfältig darauf geachtet werden, ob auf den übergeordneten Bereich innerhalb der Wiederholung zugegriffen werden muss.

Hier ein einfaches Beispiel, das zeigt, wie Sie einen Wert in Ihrem übergeordneten Bereich von einem Click-Ereignis in ngRepeat .

scope val:  {{val}}<br/>
ctrlAs val: {{ctrl.val}}
<ul>
    <li ng-repeat="item in itemCollection">
        <a href="#" ng-click="$parent.val=item.value; ctrl.val=item.value;">
            {{item.label}} {{item.value}}
        </a>
    </li>
</ul>

$scope.val = 0;
this.val = 0;

$scope.itemCollection = [{
    id: 0,
    value: 4.99,
    label: 'Football'
},
{
    id: 1,
    value: 6.99,
    label: 'Baseball'
},
{
    id: 2,
    value: 9.99,
    label: 'Basketball'
}];

Wenn bei ng-click nur val = item.value vorhanden war, wird der val im übergeordneten Bereich aufgrund des isolierten Bereichs nicht aktualisiert. Deshalb wird auf den übergeordneten Bereich mit der $parent Referenz oder mit der controllerAs Syntax zugegriffen (z. B. ng-controller="mainController as ctrl" ).

Verschachtelte ng-Wiederholung

Sie können auch verschachtelte Wiederholungen verwenden.

<div ng-repeat="values in test">
    <div ng-repeat="i in values">
      [{{$parent.$index}},{{$index}}] {{i}}
    </div>
</div>

var app = angular.module("myApp", []);
app.controller("ctrl", function($scope) {
  $scope.test = [
    ['a', 'b', 'c'],
    ['d', 'e', 'f']
  ];
});

Um auf den Index des übergeordneten ng-repeat innerhalb des untergeordneten ng-repeat zuzugreifen, können Sie $parent.$index .

ngShow und ngHide

Die Direktive ng-show zeigt oder versteckt das HTML-Element basierend darauf, ob der übergebene Ausdruck wahr oder falsch ist. Wenn der Wert des Ausdrucks falsch ist, wird er ausgeblendet. Wenn es wahr ist, wird es sich zeigen.

Die ng-hide Anweisung ist ähnlich. Wenn der Wert jedoch falsch ist, wird das HTML-Element angezeigt. Wenn der Ausdruck wahr ist, wird er verborgen.

Arbeitsbeispiel für JSBin

Controller :

var app = angular.module('app', []);
  
angular.module('app')
  .controller('ExampleController', ExampleController);
 
function ExampleController() {
  
  var vm = this;
  
  //Binding the username to HTML element
  vm.username = '';
  
  //A taken username
  vm.taken_username = 'StackOverflow';
  
}

Aussicht

<section ng-controller="ExampleController as main">
    
    <p>Enter Password</p>
    <input ng-model="main.username" type="text">
    
    <hr>
    
    <!-- Will always show as long as StackOverflow is not typed in -->
    <!-- The expression is always true when it is not StackOverflow -->
    <div style="color:green;" ng-show="main.username != main.taken_username">
      Your username is free to use!
    </div>
    
    <!-- Will only show when StackOverflow is typed in -->
    <!-- The expression value becomes falsy -->
    <div style="color:red;" ng-hide="main.username != main.taken_username">
      Your username is taken!
    </div>
    
    <p>Enter 'StackOverflow' in username field to show ngHide directive.</p>
    
 </section>

ngOptions

ngOptions ist eine Direktive, die das Erstellen einer HTML-Dropdown-Box für die Auswahl eines Elements aus einem Array vereinfacht, das in einem Modell gespeichert wird. Das ngOptions-Attribut wird verwendet, um dynamisch eine Liste von <option> -Elementen für das <select> -Element mithilfe des Arrays oder Objekts zu erstellen, das durch Auswertung des ngOptions-Verständnisausdrucks erhalten wird.

Mit ng-options das Markup auf ein select-Tag reduziert werden, und die Direktive erstellt das gleiche select:

<select ng-model="selectedFruitNgOptions" 
        ng-options="curFruit as curFruit.label for curFruit in fruit">
</select>

Es gibt anthere Weg zur Schaffung von select unter Verwendung ng-repeat , aber es wird nicht empfohlen , zu verwenden ng-repeat , wie es vor allem für allgemeine Zwecke verwendet wird , wie die forEach nur Schleife. Während sich ng-options speziell für das Erstellen von select Tag ng-options eignet.

Das obige Beispiel wäre ng-repeat

<select ng-model="selectedFruit">
    <option ng-repeat="curFruit in fruit" value="{{curFruit}}">
        {{curFruit.label}}
    </option>
</select>

VOLLES BEISPIEL

Schauen wir uns das obige Beispiel auch im Detail an.

Datenmodell für das Beispiel:

$scope.fruit = [
    { label: "Apples", value: 4, id: 2 },
    { label: "Oranges", value: 2, id: 1 },
    { label: "Limes", value: 4, id: 4 },
    { label: "Lemons", value: 5, id: 3 }
];

<!-- label for value in array -->
<select ng-options="f.label for f in fruit" ng-model="selectedFruit"></select>