Biểu mẫu AngularJS
Các biểu mẫu trong AngularJS cung cấp tính năng liên kết dữ liệu và xác thực các điều khiển đầu vào.
Điều khiển đầu vào
Điều khiển đầu vào là các phần tử đầu vào HTML:
- yếu tố đầu vào
- chọn phần tử
- yếu tố nút
- phần tử vùng văn bản
Liên kết dữ liệu
Điều khiển đầu vào cung cấp liên kết dữ liệu bằng cách sử dụng lệnh ng-model .
<input type="text" ng-model="firstname">
Ứng dụng hiện có thuộc tính có tên firstname .
Lệnh ng-model liên kết bộ điều khiển đầu vào với phần còn lại của ứng dụng của bạn.
Thuộc tính firstname có thể được tham chiếu trong bộ điều khiển:
Ví dụ
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.firstname = "John";
});
</script> Hãy tự mình thử »Nó cũng có thể được đề cập đến nơi khác trong ứng dụng:
Ví dụ
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
Hãy tự mình thử » Hộp kiểm
Hộp kiểm có giá trị true hoặc false . Áp dụng lệnh ng-model cho hộp kiểm và sử dụng giá trị của nó trong ứng dụng của bạn.
Ví dụ
Hiển thị tiêu đề nếu hộp kiểm được chọn:
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My
Header</h1>
Hãy tự mình thử »nút radio
Liên kết các nút radio với ứng dụng của bạn bằng lệnh ng-model .
Các nút radio có cùng ng-model có thể có các giá trị khác nhau, nhưng chỉ giá trị đã chọn mới được sử dụng.
Ví dụ
Hiển thị một số văn bản, dựa trên giá trị của nút radio đã chọn:
<form>
Pick a topic:
<input type="radio" ng-model="myVar"
value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
Hãy tự mình thử » Giá trị của myVar sẽ là dogs , tuts hoặc cars .
Chọn hộp
Liên kết các hộp chọn vào ứng dụng của bạn bằng lệnh ng-model .
Thuộc tính được xác định trong thuộc tính ng-model sẽ có giá trị của tùy chọn đã chọn trong hộp chọn.
Ví dụ
Hiển thị một số văn bản, dựa trên giá trị của tùy chọn đã chọn:
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option
value="cars">Cars
</select>
</form>
Hãy tự mình thử » Giá trị của myVar sẽ là dogs , tuts hoặc cars .
Một ví dụ về biểu mẫu AngularJS
biểu mẫu = {{người dùng}}
chủ = {{master}}
Mã ứng dụng
<div ng-app="myApp" ng-controller="formCtrl">
<form
novalidate>
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>
<p>master = {{ master}}</p>
</div>
<script>
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();
});
</script>
Hãy tự mình thử »Thuộc tính novalidate là thuộc tính mới trong HTML5. Nó vô hiệu hóa mọi xác nhận trình duyệt mặc định.
Ví dụ giải thích
Lệnh ng-app xác định ứng dụng AngularJS.
Lệnh ng-controller xác định bộ điều khiển ứng dụng.
Lệnh ng-model liên kết hai phần tử đầu vào với đối tượng người dùng trong mô hình.
Bộ điều khiển formCtrl đặt các giá trị ban đầu cho đối tượng chính và xác định phương thức reset() .
Phương thức reset() đặt đối tượng người dùng bằng đối tượng chính .
Lệnh ng-click gọi phương thức reset() , chỉ khi nút được nhấp vào.
Thuộc tính novalidate không cần thiết cho ứng dụng này, nhưng thông thường bạn sẽ sử dụng nó trong các biểu mẫu AngularJS, để ghi đè xác thực HTML5 tiêu chuẩn.
