AngularJS lomakkeet

AngularJS:n lomakkeet tarjoavat syöttökontrollien datan sidonnaisuuden ja vahvistuksen.

syöttökontrollit

syöttökontrollit ovat HTML-syöttöelementtejä:

• syöttö-elementti
• valitsin-elementti
• painike-elementti
• tekstialue-elementti

datan sidonnaisuus

syöttökontrollit käyttävät Ohje määrittelee sovelluksen ohjaimen. Ohje tarjoaa datan sidonnaisuuden.

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

Nyt sovelluksessa on nimeltään firstname ominaisuuksia.

Ohje määrittelee sovelluksen ohjaimen. Ohje sitoo input-ohjaimen sovelluksen loput osat.

ominaisuus firstname，voidaan viitata ohjaimessa:

实例

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

</script>

Se voidaan viitata myös muihin sovelluksen sijoihin:

实例

<form>
  Nimi: <input type="text" ng-model="firstname">
</form>
<h1>Inputoitit: {{firstname}}</h1>

</script>

Valintaruudut

valintaruudun arvo on true 或 false。Aseta Ohje määrittelee sovelluksen ohjaimen. Ohje sovelletaan valintaruutuun ja käytetään sen arvoa sovelluksessa.

实例

Jos valitaan valintaruutu, näytetään otsikko:

<form>
  Valitse näyttääksesi otsikon:
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">Oma otsikkoni</h1>

</script>

Valintapainikkeet

使用 Ohje määrittelee sovelluksen ohjaimen. ohje sitoo valintapainikkeen sovellukseesi.

Samalla Ohje määrittelee sovelluksen ohjaimen. valintapainikkeen voi olla erilaisia arvoja, mutta vain valittu arvo käytetään.

实例

Näytä teksti valitun valintapainikkeen arvon mukaan:

<form>
  Valitse aihe:
  <input type="radio" ng-model="myVar" value="dogs">Koirat
  <input type="radio" ng-model="myVar" value="tuts">Oppaat
  <input type="radio" ng-model="myVar" value="cars">Auta
</form>

</script>

myVar的值将是 dogs、tuts 或 cars。

下拉选择框

使用 Ohje määrittelee sovelluksen ohjaimen. 指令将下拉选择框绑定到您的应用程序。

Ohje määrittelee sovelluksen ohjaimen. 在属性中定义的属性将具有选择框中所选选项的值。

实例

根据选定的选项值显示一些文本：

<form>
  选择一个主题：
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
  </select>
</form>

</script>

myVar 的值将是 dogs、tuts 或 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>

Kokeile itse novalidate

Ominaisuus on uusi ominaisuus HTML5:ssä. Se poistaa kaikki oletusarvoisen selaimen vahvistuksen.

Esimerkki selitetty ng-app

Ohje määrittelee AngularJS-sovelluksen. ng-controller

Ohje määrittelee sovelluksen ohjaimen. ng-model

Ohje sidottaa kaksi syöttöelementtiä mallin user-olioon. formCtrl master Ohjaimen reset() Metodi.

reset() Metodi asettaa olion alkuperäisen arvon ja määrittelee user Olio asetetaan yhtä suureksi master Olio.

ng-click Ohje kutsutaan vain napin napsautettaessa reset() Metodi.

Tämä sovellus ei vaadi novalidate-ominaisuutta, mutta sitä käytetään yleensä AngularJS-lomakkeissa standardin HTML5-vahvistuksen korvaamiseksi.