Modulo AngularJS

Raccomandazioni di corso:

AngularJS fornisce la binding dei dati e la convalida dei controlli di input nei moduli.

Controlli di input

• I controlli di input sono elementi HTML di input:
• elemento input
• elemento select
• elemento button

elemento textarea

binding dei dati La direttiva definisce il controller dell'applicazione. Il controllo di input utilizza

L'instruzione fornisce la binding dei dati.

<input type="text" ng-model="firstname"> proprietà Ora, l'applicazione ha un nome

La direttiva definisce il controller dell'applicazione. proprietà.

L'instruzione lega il controllo di input al resto dell'applicativo. proprietàpuò essere richiamato nel controller:

Esempio

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.firstname = "Bill";
$scope.reset();
});

</script>

Può essere anche richiamato in altri punti dell'applicativo:

Esempio

<form>
  Nome: <input type="text" ng-model="firstname">
</form>
<h1>Stai inserendo: {{firstname}}</h1>

</script>

Pulsante di opzione

Il valore del pulsante di opzione è true o false。 La direttiva definisce il controller dell'applicazione. L'instruzione si applica al pulsante di opzione e utilizza il suo valore nel tuo applicativo.

Esempio

Se selezionato, mostra il titolo:

<form>
  Seleziona per mostrare il titolo:
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">Il mio titolo</h1>

</script>

Pulsante di opzione

Usa La direttiva definisce il controller dell'applicazione. L'instruzione lega i pulsanti di opzione al tuo applicativo.

Con lo stesso La direttiva definisce il controller dell'applicazione. I pulsanti di opzione possono avere valori diversi, ma verrà utilizzato solo il valore selezionato.

Esempio

Mostra del testo in base al valore del pulsante di opzione selezionato:

<form>
  Scegli un argomento:
  <input type="radio" ng-model="myVar" value="dogs">Cani
  <input type="radio" ng-model="myVar" value="tuts">Tutoriali
  <input type="radio" ng-model="myVar" value="cars">Automobili
</form>

</script>

Il valore di myVar sarà dogs、tuts o cars。

la casella di selezione a discesa

Usa La direttiva definisce il controller dell'applicazione. L'instruzione binding bind alla casella di selezione a discesa del tuo applicativo.

La direttiva definisce il controller dell'applicazione. Le proprietà definite nell'attributo avranno il valore dell'opzione selezionata nel menu a discesa.

Esempio

Visualizza alcuni testi in base al valore dell'opzione selezionata:

<form>
  Scegli un argomento:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
  </select>
</form>

</script>

myVar 的值将是 dogs、tuts o cars。

AngularJS 表单示例

应用程序代码

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    名字：<br>
    <input type="text" ng-model="user.firstName"><br>
    姓氏：<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">重置</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.master = {firstName: "Bill", lastName: "Gates"};
  $scope.reset = function() {
    $scope.user = angular.copy($scope.master);
  };
  $scope.reset();
$scope.reset();
});

</script>

Prova personalmente novalidate

L'attributo è una nuova proprietà HTML5. Disabilita qualsiasi validazione di default del browser.

Esempio spiegato ng-app

La direttiva definisce l'applicazione AngularJS. ng-controller

La direttiva definisce il controller dell'applicazione. ng-model

La direttiva lega due elementi di input ai campi dell'oggetto user nel modello. formCtrl master Il controller come reset() Metodi.

reset() Il metodo imposta il valore iniziale dell'oggetto e definisce user L'oggetto viene impostato uguale a master Oggetto.

ng-click La direttiva viene chiamata solo quando si clicca sul pulsante reset() Metodi.

Questa applicazione non richiede l'attributo novalidate, ma di solito lo si utilizza nei moduli AngularJS per sovrascrivere la validazione standard HTML5.