AngularJS Model

Chỉ thị ng-model trong AngluarJS dùng để bind dữ liệu của phần tử HTML với dữ liệu sử dụng trong ứng dụng. Dữ liệu của các phần tử HTML được cung cấp bởi người dùng nhập dữ vào, ví dụ như dữ liệu trong phần tử input, textarea...

Chỉ thị ng-model

Chỉ thị ng-model dưới đây bind dữ liệu của trường input trong trang HTML với dữ liệu của biến nametrong AngularJS.

<div ng-app="myApp" ng-controller="myCtrl">
    Name: <input ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "Trần Văn Tí";
});
</script>

Chạy

Bind 2 chiều

Với kiểu bind dữ liệu 2 chiều (two way binding) thì khi người dùng thay đổi dữ liệu trong trường input thì AngluarJS cũng sẽ thay đổi giá trị của biến name trong biểu thức đặt trong thẻ <h1>.

<div ng-app="myApp" ng-controller="myCtrl">
    <p>Tên bạn: <input ng-model="name"></p>
    <h1>Tên bạn là: {{name}}</h1>
</div>

Chạy

Xác thực dữ liệu người dùng nhập vào

Chỉ thị ng-model có thể được dùng để xác thực dữ liệu người dùng nhập vào ví dụ như xác thực trường dữ liệu là kiểu số, kiểu email...

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">Định dạng của địa chỉ email không đúng</span>
</form>

Chạy

Thẻ span chỉ hiển thị khi biểu thức đặt trong thuộc tính ng-show trả về giá trị là true.

Trạng thái của ứng dụng

Chỉ thị ng-model còn cung cấp cho chúng ta biết những thông tin về trạng thái của ứng dụng AngularJS.

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

Chạy

Lớp CSS

AngularJS sẽ thêm lớp CSS vào thẻ HTML các tương ứng với trạng thái của chúng. Ở ví dụ sau nếu như trường input có giá trị rỗng thì AngularJS sẽ thêm lớp CSS ng-invalid vào thẻ này.

<body>

<form ng-app="" name="myForm">
    Enter your name:
    <input name="myAddress" ng-model="text" required>
</form>
<style>
input.ng-invalid {
    background-color: red;
}
</style>

Chạy

Dưới đây là danh sách các lớp CSS mà AngularJS thêm (hoặc xoá) khỏi các trường của biểu mẫu dựa trên trạng thái của chúng:

  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending
  • ng-pristine
AngularJS JavaScript
Thêm Bình Luận: