Lernen Sie AngularJS-Formulare in der Praxis_AngularJS

Formular ist die am häufigsten verwendete Komponente. In Angular.js werden dem Formular allein nicht viele Sonderfunktionen hinzugefügt. Durch die Nutzung der Eigenschaften des Angular.js-Frameworks selbst kann das Formular jedoch benutzerfreundlicher dargestellt werden. Im Folgenden wird vorgestellt, wie mehrere häufig verwendete Funktionen in Angular geschickt implementiert werden.

1. Aktualisieren Sie die Ausgabedaten in Echtzeit basierend auf den Eingabedomänendaten

Der folgende Code implementiert ein einfaches Berechnungsformular, das die vom Benutzer eingegebenen Daten verarbeiten und in Echtzeit im Formularausgabefeld anzeigen kann:

<div ng-app="" ng-init="quantity=1;price=5"> 
数量： <input type="number" ng-model="quantity"> 
价格： <input type="number" ng-model="price"> 
<p><b>总价：</b> {{ quantity * price }}</p> 
</div> 

Durch die Definition von zwei NG-Modellen werden die vom Benutzer eingegebenen Daten in Echtzeit überwacht, {{}} wird zum Aufrufen der Daten verwendet und eine vorgeschlagene Berechnungsformularfunktion wird mit nur wenigen Codezeilen vervollständigt.

2. Implementieren Sie die Funktion zum Zurücksetzen des Formulars

Der folgende Code implementiert eine häufig verwendete Funktion in einem Formular: das Zurücksetzen des Formulars.

HTML-Code:

<div ng-app="myApp" ng-controller="formCtrl"> 
<form> 
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> 
</div> 

JS-Code:

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(); 
}); 

Im JS-Controller-Code definieren wir das Masterobjekt, um den Wert des Formulareingabefelds im ersten Moment zu speichern. Wir haben eine Methode „reset()“ definiert. Nachdem die Methode ausgeführt wurde, wird der Wert im Master dem Benutzer mithilfe der Methode „angular.copy“ zugewiesen. Im HTML-Code verwenden wir das Mausklickereignis ng-click, um die Funktion reset() auszulösen und unsere Funktion zu implementieren.

3. Implementieren Sie die Funktion zum Auswählen des Formular-Dropdown-Menüs

In Angular ist die Implementierung von Dropdown-Menüs einfach. Mit der ng-repeat-Direktive können wir ganz einfach ein Dropdown-Menü implementieren:

Definieren Sie zunächst die Daten im js-Modell. Das Datenformat ist wie folgt:

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
$scope.names = ["Google", "Runoob", "Taobao"]; 
}); 

Dann verwenden wir ng-repeat, um die Daten im Modell in HTML zu lesen (die genaue Bedeutung finden Sie im vorherigen Blog)

<div ng-app="myApp" ng-controller="myCtrl"> 
<select ng-model="selectedName" ng-options="x for x in names"> 
</select> 
</div> 

In Bezug auf das Dropdown-Menü geht es auch um das Lesen von Daten aus der Datenbank, aus der Ferne usw. Darüber hinaus gibt es andere Methoden zur Implementierung des Dropdown-Menüs. Diese werden später besprochen.