AngularJS Formularer

AngularJS' former tilbyder data-binding og validering af input-kontroller.

Input-kontroller

Input-kontroller er HTML-inputelementer:

• input-element
• select-element
• button-element
• textarea-element

data-binding

Input-kontroller bruger Instruktionen definerer applikationens kontrolprogram. Instruktionen tilbyder data-binding.

<input type="text" ng-model="firstname">

Nu har applikationen en som firstname .

Instruktionen definerer applikationens kontrolprogram. Instruktionen binder input-kontrollen til resten af applikationen.

egenskab firstname，kan refereres til i kontrolleren:

Eksempel

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

</script>

Det kan også refereres til på andre steder i applikationen:

Eksempel

<form>
  Navn: <input type="text" ng-model="firstname">
</form>
<h1>Du har indtastet: {{firstname}}</h1>

</script>

afkrydsningsfelt

afkrydsningsfeltets værdi er true eller false。 Instruktionen definerer applikationens kontrolprogram. Instruktionen anvendes på afkrydsningsfeltet og bruger værdien i din applikation.

Eksempel

Vis titlen, hvis afkrydsningsfeltet er markeret:

<form>
  Markér for at vise titlen:
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">Min titel</h1>

</script>

radio-knapper

Brug Instruktionen definerer applikationens kontrolprogram. instruktioner binder radio-knapperne til din applikation.

med samme Instruktionen definerer applikationens kontrolprogram. radio-knappen kan have forskellige værdier, men kun den valgte værdi vil blive brugt.

Eksempel

Vis nogle tekster baseret på værdien af den valgte radio-knap:

<form>
  Vælg et emne:
  <input type="radio" ng-model="myVar" value="dogs">Hunde
  <input type="radio" ng-model="myVar" value="tuts">Tutorials
  <input type="radio" ng-model="myVar" value="cars">Biler
</form>

</script>

værdien af myVar vil være hundeogtutorials eller cars。

dropdown-menu

Brug Instruktionen definerer applikationens kontrolprogram. Instruktioner binder dropdown-menuen til din applikation.

Instruktionen definerer applikationens kontrolprogram. Egenskaber defineret i attributterne vil have værdien af det valgte valg i dropdown-menuen.

Eksempel

Vis nogle tekster baseret på det valgte værdi:

<form>
  Vælg et emne:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Hunde
    <option value="tuts">Tutorials
    <option value="cars">Biler
  </select>
</form>

</script>

værdien af myVar vil være hundeogtutorials eller 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>

Prøv det selv novalidate

Egenskaben er en ny egenskab i HTML5. Den deaktiverer enhver standardbrowser-validering.

Eksempel Forklaret ng-app

Instruktionen definerer AngularJS-applikationen. ng-controller

Instruktionen definerer applikationens kontrolprogram. ng-model

Instruktionen binder to input-elementer til user-objektet i modellen. formCtrl master Kontrolleren som reset() Metoder.

reset() Metoden sætter objektet til en startværdi og definerer user Objektet sættes til at være lig med master Objekt.

ng-click Instruktioner kaldes kun, når du klikker på knappen reset() Metoder.

Dette program kræver ikke novalidate egenskaben, men du vil normalt finde det brugt i AngularJS formularer til at overskrive standard HTML5 validering.