Pelajari borang AngularJS dalam practice_AngularJS

Borang ialah komponen yang paling biasa digunakan. Dalam Angular.js, tidak banyak ciri khas yang ditambahkan pada borang sahaja. Walau bagaimanapun, menggunakan ciri-ciri rangka kerja Angular.js itu sendiri, borang itu boleh dipersembahkan dengan cara yang lebih mesra. Berikut akan memperkenalkan bagaimana beberapa fungsi yang biasa digunakan dilaksanakan dengan bijak dalam Angular.

1 Kemas kini data output dalam masa nyata berdasarkan data domain input

Kod berikut melaksanakan borang pengiraan mudah, yang boleh memproses input data oleh pengguna dan memaparkannya dalam medan output borang dalam masa nyata:

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

Dengan mentakrifkan dua model ng, input data oleh pengguna dipantau dalam masa nyata dan {{}} digunakan untuk memanggil data dan fungsi borang pengiraan yang dicadangkan dilengkapkan dengan hanya beberapa baris kod.

2. Laksanakan fungsi set semula borang

Kod berikut melaksanakan fungsi yang kerap digunakan dalam borang: menetapkan semula borang.

Kod HTML:

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

Kod JS:

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

Dalam kod pengawal JS, kami mentakrifkan objek induk untuk menyimpan nilai kotak input borang pada saat permulaan. Kami menentukan kaedah reset() Selepas kaedah dilaksanakan, nilai dalam induk diberikan kepada pengguna menggunakan kaedah angular.copy. Kaedah ini digunakan untuk menetapkan semula medan borang. Dalam kod HTML, kami menggunakan acara klik tetikus ng-click untuk mencetuskan fungsi reset() untuk melaksanakan fungsi kami.

3. Laksanakan fungsi medan pemilihan menu lungsur turun

Dalam Angular, melaksanakan menu lungsur adalah mudah. Kita boleh menggunakan arahan ng-repeat untuk melaksanakan menu lungsur turun dengan mudah:

Pertama, tentukan data dalam model js Format data adalah seperti berikut:

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

Kemudian, kami menggunakan ng-repeat untuk membaca data dalam model dalam HTML (lihat blog sebelumnya untuk makna khusus)

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

Berkenaan menu lungsur turun, ia juga melibatkan pembacaan data dari pangkalan data, jauh dan lain-lain. Selain itu, terdapat kaedah lain untuk melaksanakan menu lungsur. Ini akan dibincangkan kemudian.