AngularJS => Wbudowane dyrektywy

Wyrażenia kątowe - tekst a liczba

Ten przykład pokazuje, w jaki sposób wyrażenia kątowe są obliczane przy użyciu type="text" i type="number" dla elementu wejściowego. Rozważ następujący kontroler i zobacz:

Kontroler

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

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

Widok

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

Gdy używasz + w wyrażeniu powiązanym z wprowadzaniem tekstu , operator połączy łańcuchy (pierwszy przykład), wyświetlając 55 na ekranie * .
Gdy używasz + w wyrażeniu powiązanym z wprowadzaniem liczb , operator zwraca sumę liczb (drugi przykład), wyświetlając 10 na ekranie * .

* - To znaczy, dopóki użytkownik nie zmieni wartości w polu wprowadzania, potem wyświetlacz odpowiednio się zmieni.

Przykład roboczy

ngRepeat

ng-repeat jest wbudowaną dyrektywą w Angular, która pozwala iterować tablicę lub obiekt i daje możliwość powtarzania elementu raz dla każdego elementu w kolekcji.

ng-powtórz tablicę

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

Gdzie:
item = pojedynczy element w kolekcji
itemCollection = Tablica, którą iterujesz

powtórz obiekt

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

Gdzie:
klucz = nazwa właściwości
wartość = wartość właściwości
myObject = obiekt, który iterujesz

filtruj powtórzenie ng według danych wprowadzonych przez użytkownika

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

Gdzie:
searchText = tekst, według którego użytkownik chce filtrować listę
stringArray = tablica ciągów znaków, np. ['string', 'array']

Możesz także wyświetlić lub odfiltrować elementy w innym miejscu, przypisując wyjściu filtru alias z as aliasName , na przykład:

<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 i ng-repeat-end

Aby powtórzyć wiele elementów DOM poprzez zdefiniowanie punktu początkowego i końcowego, można użyć dyrektyw ng-repeat-start i 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>

Wynik:

Ważne jest, aby zawsze zamykać ng-repeat-start z ng-repeat-end .

Zmienne

ng-repeat ujawnia również te zmienne w wyrażeniu

Zmienna	Rodzaj	Detale
`$index`	Numer	Równa się indeksowi bieżącej iteracji ($ index === 0 przy pierwszym iterowanym elemencie uzyska wartość true; patrz `$first` )
`$first`	Boolean	Sprawdza się jako prawda przy pierwszym iterowanym elemencie
`$last`	Boolean	Ocenia wartość true w ostatnim iterowanym elemencie
`$middle`	Boolean	Wyznacza wartość true, jeśli element znajduje się między `$first` a `$last`
`$even`	Boolean	Ocenia wartość true przy parzystej iteracji (odpowiednik `$index%2===0` )
`$odd`	Boolean	Sprawdza się jako prawda przy iteracji nieparzystej (odpowiednik `$index%2===1` )

Uwagi dotyczące wydajności

Renderowanie ngRepeat może stać się powolne, szczególnie przy użyciu dużych kolekcji.

Jeśli obiekty w kolekcji mają właściwość identifier, zawsze należy track by identyfikatora zamiast całego obiektu, co jest funkcją domyślną. Jeśli nie ma identyfikatora, zawsze możesz użyć wbudowanego $index .

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

Zakres ngRepeat

ngRepeat zawsze tworzy izolowany zakres potomny, dlatego należy zachować ostrożność, jeśli zakres macierzysty musi być dostępny wewnątrz powtórzenia.

Oto prosty przykład pokazujący, jak ustawić wartość w zakresie nadrzędnym na podstawie zdarzenia kliknięcia w 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'
}];

Jeśli nie było tylko val = item.value w ng-click nie będzie aktualizować val w zakresie dominującej ze względu na pojedyncze zakresie. Dlatego dostęp do zakresu nadrzędnego jest uzyskiwany za pomocą $parent ng-controller="mainController as ctrl" Reference lub składni controllerAs (np. ng-controller="mainController as ctrl" ).

Zagnieżdżone powtórzenie ng

Możesz także użyć zagnieżdżonego ng-repeat.

<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']
  ];
});

Tutaj, aby uzyskać dostęp do indeksu nadrzędnego powtórzenia ng wewnątrz podrzędnego powtórzenia ng, możesz użyć $parent.$index .

ngShow i ngHide

Dyrektywa ng-show pokazuje lub ukrywa element HTML na podstawie tego, czy przekazane mu wyrażenie jest prawdziwe czy fałszywe. Jeśli wartością wyrażenia jest fałsz, wówczas się ukryje. Jeśli to prawda, to pokaże.

Dyrektywa ng-hide jest podobna. Jeśli jednak wartość jest fałszywa, pokaże element HTML. Kiedy wyrażenie jest prawdziwe, ukryje je.

Przykład działania JSBin

Kontroler :

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';
  
}

Widok

<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 to dyrektywa, która upraszcza tworzenie rozwijanego pola HTML do wyboru elementu z tablicy, która będzie przechowywana w modelu. Atrybut ngOptions służy do dynamicznego generowania listy elementów <option> dla elementu <select> przy użyciu tablicy lub obiektu uzyskanego przez ocenę wyrażenia rozumienia ngOptions.

Dzięki ng-options znaczniki można zredukować do tylko znacznika select, a dyrektywa utworzy ten sam wybór:

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

Istnieje inny sposób tworzenia select opcji za pomocą ng-repeat , ale nie zaleca się używania ng-repeat ponieważ jest on najczęściej używany do ogólnego celu, takiego jak forEach tylko do zapętlenia. Natomiast ng-options służy do tworzenia opcji select tagów.

Powyższy przykład to użycie ng-repeat

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

PEŁNY PRZYKŁAD

Zobaczmy szczegółowo powyższy przykład z pewnymi jego odmianami.

Model danych na przykład:

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