AngularJS forms

AngularJS-formulär tillhandahåller data-bindning och validering för inmatningskontroller.

Inmatningskontroll

Inmatningskontrollen är en HTML-inmatningskomponent:

• inmatnings-element
• select-element
• knapp-element
• textarea-element

data-bindning

Inmatningskontrollen använder Anvisningen definierar applikationens kontrollr. Instruktionen tillhandahåller data-bindning.

<input type="text" ng-model="förnamn">

Nu har applikationen en namn förnamn egenskapen.

Anvisningen definierar applikationens kontrollr. Instruktionen binder inmatningskontrollen till övriga delar av applikationen.

egenskap förnamn，kan hänvisas till i kontrollern:

Exempel

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

</script>

Det kan också hänvisas till på andra platser i applikationen:

Exempel

<form>
  Namn: <input type="text" ng-model="förnamn">
</form>
<h1>Du angav: {{förnamn}}</h1>

</script>

Kryssruta

Kryssruttans värde är true eller false。 Anvisningen definierar applikationens kontrollr. Instruktionen tillämpas på kryssrutan och används i ditt program.

Exempel

Visa rubriken om rutan är markerad:

<form>
  Markera för att visa rubriken:
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">Min rubrik</h1>

</script>

Radioknapp

Använd Anvisningen definierar applikationens kontrollr. Instruktionen binder radioknappen till ditt program.

Med samma Anvisningen definierar applikationens kontrollr. Radioknappens värden kan variera, men endast den valda används.

Exempel

Visa text baserat på värdet för den valda radioknappen:

<form>
  Välj ett ämne:
  <input type="radio" ng-model="myVar" value="dogs">Hundar
  <input type="radio" ng-model="myVar" value="tuts">Tutorials
  <input type="radio" ng-model="myVar" value="cars">Bilar
</form>

</script>

värdet för myVar kommer att vara hundar、tutorials eller cars。

rullgardinsmeny

Använd Anvisningen definierar applikationens kontrollr. Instruktionen binder rullgardinsmenyn till ditt applikation.

Anvisningen definierar applikationens kontrollr. Egenskaper definierade i attributen kommer att ha värdet för det valda alternativet i rullgardinsmenyn.

Exempel

Visa text baserat på det valda alternativets värde:

<form>
  Välj ett ämne:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Hundar
    <option value="tuts">Tutorials
    <option value="cars">Bilar
  </select>
</form>

</script>

värdet för myVar kommer att vara hundar、tutorials 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>

Prova själv novalidate

Egenskapen är en ny egenskap i HTML5. Den inaktiverar alla förvalda webbläsarverifieringar.

Example Explained ng-app

Anvisningen definierar AngularJS-applikationen. ng-controller

Anvisningen definierar applikationens kontrollr. ng-model

Anvisningen binder två inmatningselement till user-objektet i modellen. formCtrl master Kontrollern till reset() Metoder.

reset() Metoden sätter objektets initialvärde och definierar user Objektet sätts till lika med master Objekt.

ng-click Anvisningen anropas endast när knappen klickas reset() Metoder.

Denna applikation behöver inte novalidate-attributet, men det används vanligtvis i AngularJS-formulär för att åsidosätta standard HTML5-verifiering.