Le direttive e i filtri



Direttive

Angular integra html attraverso le direttive .
Queste le piu’ usate :

  • ng-model :cattura il valore di un campo di input
  • ng-click e ng-over : esegue una funzione definita nel controller al click o over
  • ng-init : inizializza un campo
  • ng-show, ng-hidden : serve per mostrare o nascondere un elemento. Utilizzando il controller si puo’ anche creare la funzione toggle.
  • ng-if : si comporta come if in php . Verifica una condizione
  • ng-repeat: come il ciclo while
  • ng-class/ng-style : Serve per impostare dinamicamente una classe o style
  • ng-cloak: per non vedere le doppie graffe , prima che angular venga caricato
  • class="ng-cloak" imposta uno stile all’elemento : display: none !important

Nel DOWNLOAD del prossimo capitolo un esempio di utilizzo delle direttive.
Sono state usate ng-show e ng-hide per ottenere una funzione toggle che mostra quando si effettua un click su pulsante il risutato di un calcolo.
Si noti che al bottone e’ stata associata la direttiva ng-click Al click sul bottone calcola si aziona $scope.isHidden=!$scope.isHidden; definita nel controller.
ng-init per la inizializzazione.



filtri

Altro potente strumento di Angular sono i filtri.

Lower case Upper case: Semplice filtro che converte la stringa in maiuscolo o minuscolo.
{{giovanni | uppercase}} scrive GIOVANNI .


Date: dato un time stamp consente di trasformare quest’ultimo in un formato date
{{846498812111|fulldate}}
Si noti che l’espressione fulldate che definisce un formato predefinito di date.

limitTo: limita il numero di caratteri di una stringa.

orderBy :determina l’ordinamento degli elementi di un array .

Esempio


<li ng-repeat=”contact in contacts ”| orderBy=”nome”></li>