AngularJS => Direttive incorporate

Espressioni angolari - Testo contro numero

Questo esempio dimostra come vengono valutate le espressioni angolari quando si utilizza type="text" e type="number" per l'elemento di input. Si consideri il seguente controller e vista:

controllore

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

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

vista

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

Quando si utilizza + in un'espressione associata all'input di testo , l'operatore concatenerà le stringhe (primo esempio), visualizzando 55 sullo schermo * .
Quando si utilizza + in un'espressione associata all'input del numero , l'operatore restituisce la somma dei numeri (secondo esempio), visualizzando 10 sullo schermo * .

* - Fino a quando l'utente non modifica il valore nel campo di immissione, in seguito il display cambierà di conseguenza.

Esempio di lavoro

ngRepeat

ng-repeat è una direttiva incorporata in Angular che ti permette di iterare una matrice o un oggetto e ti dà la possibilità di ripetere un elemento una volta per ogni oggetto della collezione.

ng-ripeti un array

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

Dove:
item = singolo oggetto nella collezione
itemCollection = La matrice che stai iterando

ng-ripeti un oggetto

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

Dove:
chiave = il nome della proprietà
valore = il valore della proprietà
myObject = l'oggetto che stai iterando

filtra la tua ng-ripetizione per input dell'utente

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

Dove:
searchText = il testo che l'utente vuole filtrare per la lista
stringArray = una serie di stringhe, ad esempio ['string', 'array']

Puoi anche visualizzare o riferire gli elementi filtrati altrove assegnando al filtro un alias di output con as aliasName , in questo modo:

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

Per ripetere più elementi DOM definendo un punto iniziale e uno finale è possibile utilizzare le direttive ng-repeat-start e 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>

Produzione:

È importante chiudere sempre ng-repeat-start con ng-repeat-end .

variabili

ng-repeat espone anche queste variabili all'interno dell'espressione

Variabile	genere	Dettagli
`$index`	Numero	Uguale all'indice dell'attuale iterazione ($ index === 0 valuterà in vero al primo elemento iterato, vedi `$first` )
`$first`	booleano	Valuta true al primo elemento iterato
`$last`	booleano	Valuta true all'ultimo elemento iterato
`$middle`	booleano	Valuta true se l'elemento è compreso tra `$first` e `$last`
`$even`	booleano	Valuta true in un'iterazione pari (equivalente a `$index%2===0` )
`$odd`	booleano	Valuta true in un'iterazione dispari numerata (equivalente a `$index%2===1` )

Considerazioni sulle prestazioni

Il rendering di ngRepeat può rallentare, specialmente quando si utilizzano raccolte di grandi dimensioni.

Se gli oggetti nella raccolta hanno una proprietà identificatore, è sempre necessario track by dell'identificatore anziché dell'intero oggetto, che è la funzionalità predefinita. Se non è presente alcun identificativo, è sempre possibile utilizzare l' $index incorporato.

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

Scopo di ngRepeat

ngRepeat creerà sempre un ambito figlio isolato, quindi è necessario prestare attenzione se è necessario accedere all'ambito principale all'interno della ripetizione.

Ecco un semplice esempio che mostra come è possibile impostare un valore nello scope genitore da un evento click all'interno di 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'
}];

Se era presente solo val = item.value in ng-click , non aggiornerà la val nell'ambito genitore a causa dell'ambito isolato. Ecco perché l'ambito genitore è accessibile con riferimento $parent o con la sintassi controllerAs (ad es. ng-controller="mainController as ctrl" ).

Ng-ripetizione annidata

Puoi anche usare ng-repeat annidato.

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

Qui per accedere all'indice di parent ng-repeat all'interno di child ng-repeat, puoi usare $parent.$index .

ngShow and ngHide

La direttiva ng-show mostra o nasconde l'elemento HTML in base a se l'espressione passata è vera o falsa. Se il valore dell'espressione è falsy allora si nasconderà. Se è vero, allora mostrerà.

La direttiva ng-hide è simile. Tuttavia, se il valore è falsy, mostrerà l'elemento HTML. Quando l'espressione è veritiera, la nasconderà.

Esempio di JSBin funzionante

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

vista

<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 è una direttiva che semplifica la creazione di una casella a discesa html per la selezione di un elemento da una matrice che verrà memorizzata in un modello. L'attributo ngOptions viene utilizzato per generare dinamicamente un elenco di elementi <option> per l'elemento <select> utilizzando l'array o l'oggetto ottenuto valutando l'espressione di comprensione ngOptions.

Con ng-options il markup può essere ridotto a un solo tag select e la direttiva creerà la stessa selezione:

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

C'è un altro modo per creare opzioni di select usando ng-repeat , ma non è consigliabile usare ng-repeat dato che è usato principalmente per scopi generali come, per forEach solo loop. Mentre ng-options è specifico per la creazione di opzioni di tag select .

Sopra l'esempio usando ng-repeat sarebbe

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

ESEMPIO COMPLETO

Vediamo l'esempio sopra in dettaglio anche con alcune variazioni in esso.

Modello dati per l'esempio:

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