AngularJS-vorms
Vorms in AngularJS bied databinding en validering van insetkontroles.
Invoerkontroles
Invoerkontroles is die HTML-invoerelemente:
- insette elemente
- kies elemente
- knoppie elemente
- teksarea elemente
Data-binding
Invoerkontroles verskaf databinding deur die
ng-modelrichtlijn te gebruik.
<input type="text" ng-model="firstname">
Die toepassing het nou 'n eiendom genaamd firstname.
Die ng-modelopdrag bind die insetbeheerder aan die res van jou toepassing.
Daar kan na die eiendom firstnameverwys word in 'n kontroleerder:
Voorbeeld
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.firstname = "John";
});
</script>
Daar kan ook elders in die aansoek daarna verwys word:
Voorbeeld
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
Merkblokkie
'n Merkblokkie het die waarde trueof false. Pas die
ng-modelopdrag op 'n merkblokkie toe en gebruik die waarde daarvan in jou aansoek.
Voorbeeld
Wys die kopskrif as die merkblokkie gemerk is:
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My
Header</h1>
Radioknoppies
Bind radioknoppies aan jou toepassing met die ng-model
opdrag.
Radioknoppies met dieselfde ng-modelkan verskillende waardes hê, maar slegs die geselekteerde een sal gebruik word.
Voorbeeld
Vertoon 'n bietjie teks, gebaseer op die waarde van die gekose radioknoppie:
<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>
Die waarde van myVar sal óf dogs, tuts, of
wees cars.
Kiesboks
Bind uitgesoekte blokkies aan jou toepassing met die ng-model
opdrag.
Die eiendom wat in die ng-modelkenmerk gedefinieer word, sal die waarde van die geselekteerde opsie in die kiesblokkie hê.
Voorbeeld
Vertoon 'n bietjie teks, gebaseer op die waarde van die geselekteerde opsie:
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option
value="cars">Cars
</select>
</form>
Die waarde van myVar sal óf dogs, tuts, of
wees cars.
'n Voorbeeld van 'n AngularJS-vorm
form = {"firstName":"John","lastName":"Doe"}
meester = {"firstName":"John","lastName":"Doe"}
Aansoek kode
<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>
Die novalidate- kenmerk is nuut in HTML5. Dit deaktiveer enige verstekblaaierbekragtiging.
Voorbeeld Verduidelik
Die ng-app- richtlijn definieer die AngularJS-toepassing.
Die ng-beheerder- direktief definieer die toepassingsbeheerder.
Die ng-model- direktief bind twee invoerelemente aan die gebruikerobjek in die model.
Die formCtrl kontroleerder stel aanvanklike waardes op die meester voorwerp, en definieer die reset() metode.
Die reset() metode stel die gebruikerobjek gelyk aan die meesterobjek .
Die ng-click- instruksie roep die reset() -metode aan, slegs as die knoppie geklik word.
Die novalidate-kenmerk is nie vir hierdie toepassing nodig nie, maar gewoonlik sal jy dit in AngularJS-vorms gebruik om standaard HTML5-validering te ignoreer.