Dettagli e codice di esempio delle espressioni AngularJS

Dopo aver compreso l'uso di base di AngularJS, qui impareremo insieme i contenuti relativi alle espressioni seguendo il PDF.

　　Le espressioni in AngularJS non sono completamente le stesse di quelle in JavaScript.

　　Prima di tutto, le espressioni devono essere messe tra {{}} per essere utilizzate, e in confronto al concetto di espressione in JavaScript, ci sono alcuni punti diversi:

　　1 Differenze di scope

　　In JavaScript, l'oggetto predefinito è window, ma in AngularJs è diverso. Usa $scope per controllare l'azione.

　　2 Valori non definiti consentiti

　　In AngularJS, se si utilizza un'espressione non definita, non si verificherà alcun errore; verrà restituito direttamente un valore vuoto.

　　3 Filtri

　　Puoi utilizzare il comando pipe | nell'espressione per aggiungere filtri, simile alla riga di comando UNIX.　

　　4 Simbolo $

　　Serve per distinguere i metodi Angular dai metodi personalizzati dell'utente.

　　Ecco un breve pezzo di codice da esaminare:

<!doctype html>
<html ng-app>
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="ctl">
      name:<input ng-model="name" type="text">
      <button ng-click="reset()">reset</button>
      <br>
      {{name}}
      <br>
      hello! {{test}}
      <br>
      filter: {{name | uppercase}}
    </div>
    <script type="text/javascript">
      function ctl($scope) {
        var str = "init";
        $scope.name = str;
        $scope.reset = function() {
          $scope.name = str;
        }
      }
    </script>
  </body>
</html>

　　Tramite reset, attivare il metodo reset per il contenuto della variabile name;

　　Nell'espressione, è stato citato un test non definito, ma non è stato segnalato un errore, viene visualizzato direttamente come vuoto; - {{test}}

　　Infine, utilizzare il filtro per trasformare il valore di name nell'espressione in maiuscolo. - {{name | uppercase}}

　　Risultato dell'esecuzione:

　　　　 Ecco la raccolta di materiali per l'espressione AngularJS, continueremo a integrare ulteriori materiali, grazie per il vostro supporto!

Corso di base