AngularJS-Formular

Kursempfehlungen:

AngularJS bietet die Datenbindung und Validierung der Eingabekontrollen für das Formular.

Eingabekontrollen

• Eingabekontrollen sind HTML-Eingabelemente:
• Input-Elemente
• Select-Elemente
• Button-Elemente

Textarea-Elemente

Datenbindung Die Anweisung definiert den Anwendungscontroller. Eingabekontrollen verwenden

Die Anweisung bietet Datenbindung.

<input type="text" ng-model="firstname"> Eigenschaft Jetzt hat die Anwendung einen Namen

Die Anweisung definiert den Anwendungscontroller. Eigenschaft.

Die Anweisung bindet den Eingabekontroller an den Rest der Anwendung. EigenschaftKann im Controller referenziert werden:

Beispiel

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

</script>

Es kann auch an anderen Orten in der Anwendung referenziert werden:

Beispiel

<form>
  Name: <input type="text" ng-model="firstname">
</form>
<h1> Sie haben eingegeben: {{firstname}}</h1>

</script>

Kontrollkästchen

Der Wert des Kontrollkästchens ist true oder false. Die Die Anweisung definiert den Anwendungscontroller. Die Anweisung wird auf das Kontrollkästchen angewendet und verwendet seinen Wert in Ihrer Anwendung.

Beispiel

Wenn das Kontrollkästchen markiert ist, wird die Überschrift angezeigt:

<form>
  Markieren Sie, um die Überschrift anzuzeigen:
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">Meine Überschrift</h1>

</script>

Radio-Button

Verwenden Sie Die Anweisung definiert den Anwendungscontroller. Die Anweisung bindet den Radio-Button an Ihre Anwendung.

Mit gleicher Die Anweisung definiert den Anwendungscontroller. Die Auswahlmöglichkeiten können verschiedene Werte haben, aber nur der ausgewählte Wert wird verwendet.

Beispiel

Zeige einige Texte basierend auf dem Wert des ausgewählten Radio-Buttons:

<form>
  Wählen Sie ein Thema aus:
  <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">Autos
</form>

</script>

Der Wert von myVar wird sein dogs、tuts oder cars。

das Dropdown-Listenelement

Verwenden Sie Die Anweisung definiert den Anwendungscontroller. Die Anweisung bindet das Dropdown-Listenelement an Ihre Anwendung.

Die Anweisung definiert den Anwendungscontroller. Eigenschaften, die in den Attributen definiert sind, werden den Wert der ausgewählten Option im Optionsfeld haben.

Beispiel

Zeige einige Texte basierend auf dem ausgewählten Wert des Optionsfelds:

<form>
  Wählen Sie ein Thema aus:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Hunde
    <option value="tuts">Tutorials
    <option value="cars">Cars
  </select>
</form>

</script>

Der Wert von myVar wird sein dogs、tuts oder cars。

AngularJS-Formularbeispiel

Anwendungscode

<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>

Probieren Sie es selbst aus novalidate

Das Attribut ist eine neue Eigenschaft in HTML5. Es deaktiviert jede Standardbrowser-Validierung.

Beispiel Erklärung ng-app

Die Anweisung definiert die AngularJS-Anwendung. ng-controller

Die Anweisung definiert den Anwendungscontroller. ng-model

Die Anweisung bindet zwei Eingabelemente an das im Modell befindliche Benutzerobjekt. formCtrl master Den Controller als reset() Methoden.

reset() Die Methode setzt den Wert des Objekts zurück und definiert user Das Objekt wird auf master Objekt.

ng-click Die Anweisung wird nur aufgerufen, wenn auf den Button geklickt wird reset() Methoden.

Diese Anwendung benötigt das Attribut novalidate nicht, aber Sie verwenden es normalerweise in AngularJS-Formularen, um die Standard-HTML5-Validierung zu überschreiben.