AngularJS tut 17 : Forms

0
(0)

Các biểu mẫu trong AngularJS cung cấp ràng buộc dữ liệu và xác nhận các điều khiển đầu vào.


Kiểm soát đầu vào

Điều khiển đầu vào là các yếu tố đầu vào HTML:

  • yếu tố đầu vào
  • chọn các yếu tố
  • các yếu tố nút
  • yếu tố textarea

Liên kết dữ liệu

Điều khiển đầu vào cung cấp ràng buộc dữ liệu bằng cách sử dụng ng-modelchỉ thị.<input type=”text” ng-model=”firstname”>

Ứng dụng hiện có một thuộc tính được đặt tên firstname.

Lệnh ng-modelliê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:

Thí 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 tham chiếu ở những nơi khác trong ứng dụng:

Thí 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ị truehoặc false. Áp dụng ng-modelchỉ thị vào hộp kiểm và sử dụng giá trị của nó trong ứng dụng của bạn.

Thí 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ử »


Các 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 giống nhau ng-modelcó thể có các giá trị khác nhau, nhưng chỉ một nút đã chọn mới được sử dụng.

Thí 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à một trong hai dogstutshoặc cars.


Chọn hộp

Ràng buộc các hộp chọn vào ứng dụng của bạn bằng ng-model chỉ thị.

Thuộc tính được xác định trong ng-modelthuộc tính sẽ có giá trị của tùy chọn đã chọn trong hộp chọn.

 Thí 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à một trong hai dogstutshoặc cars.


Ví dụ về biểu mẫu AngularJS

Tên đầu tiên:

Họ:

CÀI LẠI

form = {“firstName”: “John”, “lastName”: “Doe”}

master = {“firstName”: “John”, “lastName”: “Doe”}


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

Các novalidate thuộc tính là mới trong HTML5. Nó vô hiệu hóa bất kỳ xác thực trình duyệt mặc định nào.


Giải thích ví dụ

Các ng ứng dụng chỉ thị xác định các ứng dụng AngularJS.

Lệnh ng-controller xác định bộ điều khiển ứng dụng.

Các ng mô hình với phím tắt chỉ hai yếu tố đầu vào cho người sử dụng đối tượng trong mô hình.

Các formCtrl điều khiển đặt giá trị ban đầu cho các bậc thầy đối tượng, và xác định các thiết lập lại () phương pháp.

Các thiết lập lại () phương pháp tập hợp những người sử dụng đối tượng tương đương với bậc thầy đối tượng.

Lệnh ng-click gọi phương thức reset () , chỉ khi nút được nhấp.

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.

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Related posts

AngularJS tut 25: Tham khảo thêm về AngularJS

AngularJS tut 24: Làm thử 1 ứng dụng AngularJS

AngularJS tut 23 : AngularJS Routing