Lệnh ng-model trong AngularJS

ng-model Hướng dẫn sẽ gắn kết giá trị của điều khiển HTML (input, select, textarea) với dữ liệu ứng dụng.

hướng dẫn ng-model

Sử dụng ng-model Hướng dẫn, bạn có thể gắn kết giá trị của trường nhập vào biến được tạo trong AngularJS.

mô hình

<div ng-app="myApp" ng-controller="myCtrl">
  Tên: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "Bill Gates";
});
</script>

Thử ngay

Gắn kết hai hướng

Gắn kết là hai hướng. Nếu người dùng thay đổi giá trị trong trường nhập, thuộc tính AngularJS cũng sẽ thay đổi giá trị của nó:

mô hình

<div ng-app="myApp" ng-controller="myCtrl">
  Tên: <input ng-model="name">
  <h1>Bạn đã nhập: {{name}}</h1>
</div>

Thử ngay

Xác thực đầu vào người dùng

ng-model Hướng dẫn có thể cung cấp xác thực loại dữ liệu cho dữ liệu ứng dụng (số, email, bắt buộc):

mô hình

<form ng-app="" name="myForm">
  Email:
  <input type="email" name="myAddress" ng-model="text">
  <span ng-show="myForm.myAddress.$error.email">Địa chỉ email không hợp lệ</span>
</form>

Thử ngay

Trong ví dụ trên, chỉ khi ng-show Báo cáo của biểu thức trong thuộc tính true thì mới hiển thị span.

Nếu ng-model Thuộc tính của thuộc tính không tồn tại, AngularJS sẽ tạo một thuộc tính cho bạn.

Trạng thái ứng dụng

ng-model Hướng dẫn có thể cung cấp trạng thái dữ liệu ứng dụng (đúng, bẩn, chạm, lỗi):

mô hình

<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
  Email:
  <input type="email" name="myAddress" ng-model="myText" required>
  <h1>Trạng thái</h1>
  {{myForm.myAddress.$valid}}
  {{myForm.myAddress.$dirty}}
  {{myForm.myAddress.$touched}}
</form>

Thử ngay

Lớp CSS

ng-model Hướng dẫn cung cấp lớp CSS dựa trên trạng thái của phần tử HTML:

mô hình

<style>
input.ng-invalid {
  background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
  Nhập tên của bạn:
  <input name="myName" ng-model="myText" required>
</form>

Thử ngay

ng-model Cú pháp thêm/xóa các lớp sau dựa trên trạng thái của trường biểu mẫu:

  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending
  • ng-pristine