Forme in AngularJS fornisce associazione dati e la validazione dei controlli di input.
controlli di input
controlli di input sono gli elementi di input HTML:
- elementi di input
- selezionare gli elementi
- elementi pulsante
- elementi textarea
Associazione dati
Controlli di input fornisce associazione dati utilizzando il ng-model direttiva.
<input type="text" ng-model="firstname">
L'applicazione non ora hanno una proprietà denominata firstname .
Il ng-model direttiva vincola il controller di input per il resto della vostra applicazione.
La proprietà firstname , può essere definito in un controllore:
Esempio
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.firstname = "John";
});
</script> Prova tu stesso " Può anche essere indicato altrove nella domanda:
Esempio
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
Prova tu stesso " casella di controllo
Una casella di controllo ha il valore true o false . Applicare il ng-model direttiva per una casella di controllo e utilizzare il suo valore nella vostra applicazione.
Esempio
Mostra l'intestazione se la casella è selezionata:
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My
Header</h1>
Prova tu stesso " radiobutton
Pulsanti di opzione Bind per l'applicazione con il ng-model direttiva.
I pulsanti di opzione con lo stesso ng-model possono avere valori diversi, ma solo quello selezionato verrà utilizzato.
Esempio
Visualizzazione del testo, sulla base del valore del pulsante radio selezionata:
<form>
Pick a topic:
<input type="radio" ng-model="myVar"
value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
Prova tu stesso " Il valore di myVar sarà o dogs , tuts , o cars .
selectbox
Associare selezionare le caselle per l'applicazione con il ng-model direttiva.
La proprietà definita nel ng-model attributo avrà il valore dell'opzione selezionata nel selectbox.
Esempio
Visualizzazione del testo, in base al valore dell'opzione selezionata:
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option
value="cars">Cars
</select>
</form>
Prova tu stesso " Il valore di myVar sarà o dogs , tuts , o cars .
Una forma AngularJS Esempio
forma = {{user}}
master = {{}} maestro
Codice Applicazione
<div ng-app="myApp" ng-controller="formCtrl">
<form
novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last
Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">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: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user
= angular.copy($scope.master);
};
$scope.reset();
});
</script>
Prova tu stesso "  | L'attributo novalidate è nuovo in HTML5. Si disabilita alcuna convalida browser predefinito. |
|---|
esempio spiegato
La direttiva ng-app definisce l'applicazione AngularJS.
La direttiva ng-controllore definisce il controller dell'applicazione.
La direttiva ng-modello di lega due elementi di input per l'oggetto utente nel modello.
Il controller formCtrl imposta i valori iniziali per l'oggetto master, e definisce il metodo reset ().
Il metodo di reset () imposta l'oggetto utente uguale all'oggetto master.
La direttiva ng clic richiama il metodo reset (), solo se il pulsante viene premuto.
L'attributo novalidate non è necessaria per questa applicazione, ma normalmente si userà in AngularJS forme, per ignorare la convalida standard HTML5.