Bài 6: AngularJS – Model
ng-model Directive ng-model directive ràng buộc giá trị của HTML (input, select, textarea) tới ứng dụng dữ liệu. Với ng-model directive bạn có thể ràng buộc giá trị của một field input tới một biến được tạo trong AngularJS. Example <div ng-app=”myApp” ...
ng-model Directive
ng-model directive ràng buộc giá trị của HTML (input, select, textarea) tới ứng dụng dữ liệu.
Với ng-model directive bạn có thể ràng buộc giá trị của một field input tới một biến được tạo trong AngularJS.
Example
<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 = “John Doe”;
});
</script>
Hai Cách Ràng Buộc Giá Trị
Nếu user thay đổi giá trị bên trong input field, thì thuộc tính AngularJS cũng sẽ thay đổi giá trị của nó hoặc từ script.
EX:
<!DOCTYPE html>
<html>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<div ng-app=”myApp” ng-controller=”myCtrl”>
Name: <input ng-model=”name”>
<h1>You entered: {{name}}</h1>
</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
$scope.name = “Ku Tin”;
});
</script>
<p>Change the name inside the input field, and you will see the name in the header changes accordingly.</p>
</body>
</html>
Validate User Input
ng-model directive có thể cung cấp kiểu validate cho dữ liệu ứng dụng như (number, e-mail, required):
<!DOCTYPE html>
<html>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<form ng-app=”” name=”myForm”>
Email:
<input type=”email” name=”myAddress” ng-model=”text”>
<span ng-show=”myForm.myAddress.$error.email”>Not a valid e-mail address</span>
</form>
<p>Enter your e-mail address in the input field. AngularJS will display an errormessage if the address is not an e-mail.</p>
</body>
</html>
Trong ví dụ ở trên, thẻ span sẽ chỉ hiển thị nếu expression trong thuộc tính ng-show trả về true.
Application Status
ng-model direction có thể cung cấp trạng thái của ứng dụng (invalid, dirty, touched, error):
Example:
<!DOCTYPE html>
<html>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<form ng-app=”” name=”myForm” ng-init=”myText = ‘post@myweb.com'”>
Email:
<input type=”email” name=”myAddress” ng-model=”myText” required>
<p>Edit the e-mail address, and try to change the status.</p>
<h1>Status</h1>
<p>Valid: {{myForm.myAddress.$valid}} (if true, the value meets all criteria).</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (if true, the value has been changed).</p>
<p>Touched: {{myForm.myAddress.$touched}} (if true, the field has been in focus).</p>
</form>
</body>
</html>
CSS Classes
ng-model directive cung cấp CSS classes cho HTML element, phụ thuộc vào trạng thái của chúng.
<!DOCTYPE html>
<html>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app=”” name=”myForm”>
Enter your name:
<input name=”myName” ng-model=”myText” required>
</form>
<p>Edit the text field and it will get/lose classes according to the status.</p>
<p><b>Note:</b> A text field with the “required” attribute is not valid when it is empty.</p>
</body>
</html>
ng-model directive có các thuộc tính class như sau:
- ng-empty
- ng-not-empty
- ng-touched
- ng-untouched
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-pristine
Các bạn thử thay thế giá trị class trong ví dụ trên để trãi nghiệm nhé.
