Search by category:
AngularJS

Directive ng-model trong AngularJS, ng-model Directive

Directive ng-model trong AngularJS, ng-model Directive. Tìm hiểu về chỉ thị  ng-model trong trong AngularJS nhé. Ở bài trước chúng ta tìm hiểu về Modules trong AngularJS – Scope –  Controller và trong bài AngularJS Directives là gì mình đã giới thiệu về các Directive (chỉ thị). Hôm nay một lần nữa tìm hiểu kỹ hơn về ng-model trong AngularJS.

ng-model trong AngularJS

ng-model hay ngModel là một chỉ thị (directive) nhằm liên kết giá trị của thành phần html như input, select, textarea đến dữ liệu ứng dụng.

ngModel có chức năng chính là:

  • Liên kết view trong model và một số chỉ thị (directives) như input, textarea or select
  • Kiểm tra các hành động như required, number, email, url
  • Giữ nhiệm vụ kiểm soát các giá trị đã hợp lệ hay chưa như valid/invalid, dirty/pristine, touched/untouched, validation errors
  • Thêm các class (lớp) css vào html như ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched, ng-empty, ng-not-empty.
  • Đăng ký điều khiển với form cha ( parent form)

Ví dụ về ng-model

Bây giờ cùng tìm hiểu về các ví dụ:


<html>
<script src="https://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">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>

</body>
</html>

Giải thích: khi chương trình chạy input có chứa ngModel là name sẽ được gán giá trị John Doe bằng lênh $scope.name trong đoạn AngularJS đó.

Ví dụ khác: Ở ví dụ này khi trường input thay đổi giá trị thì thuộc tính name cũng thay đổi giá trị theo.


<html>
<script src="https://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 = "John Doe";
});
</script>

</body>
</html>

Ví dụ về ngModel sẽ kiểm tra xem email nhập vào có hợp lệ hay không.


<html>
<script src="https://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">Email không hợp lệ</span>
</form>

</body>
</html>

Ví dụ về kiểm soát các giá trị như đã hợp lệ, khi focus hoặc thay đổi giá trị.


<html>
<script src="https://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>Sửa giá trị email để thay đổi trạng thái true hay false.</p>
<h1>Status</h1>
<p>Valid: {{myForm.myAddress.$valid}} (true nếu hợp lệ).</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (true nếu được thay đổi).</p>
<p>Touched: {{myForm.myAddress.$touched}} (true nếu được focus).</p>

</form>

</body>
</html>

Ví dụ về sự thay đổi thuộc tính css:


<html>
<script src="https://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>

</body>
</html>

The ng-model có thể adds/removes các classes, trong trường hợp trường input thay đổi trạng thái.

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

ng-model trong AngularJS qua các ví dụ chi tiết, hy vọng sẽ giúp bạn hiểu rõ vấn đề.

Post Comment

Loading...
loading...
loading...