Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các cách khai báo biến trong Javascript 
Các sự kiện (Event) trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Bài 11: Directive input trong AngularJS
Nói về input thì có nhiều loại lắm, ví dụ như checkbox, textbox, select, radio, textarea, .. vậy phải chăng hôm nay chúng ta đang tìm hiểu món này? Không phải nhé các bạn, hôm nay chúng ta chỉ tìm hiểu chung chung thôi không thuộc thể loại trên. Nhưng vì là input không khai báo type nên mặc định trình duyệt hiểu đó là textbox đấy :D.
1. Tìm hiểu Directive input trong AngularJS
Khi chúng ta sử dụng các thẻ HTML input kết hợp với ng-model thì no sẽ cung cấp các liên kết giữa model với nơi được binding, và nó sẽ sinh ra một key trong $scope để lưu trữ giá trị này nên thông thường bạn có thể dụng ng-bind hoặc là biểu thức {{key}} đều được.
2. Danh sách các Directives thường đi kèm với input
Sau đây là danh sách các Directives thường hay sử dụng chung với input, mỗi directive sẽ có các cách sử dụng khác nhau và chúng ta sẽ nghiên cứu từng phần ở các bài sau nhé
| Tên | Giá trị | Chi tiết |
| ngModel | String | Khao bái key lưu vào $scope và sẽ được liên kết tới biểu thức tương ứng ({{bieuthuc}}) |
| name | String | Tên của input |
| required | String | Thiết lập lỗi khi người dùng không nhập liệu |
| ngRequired | Boolean | Thiết lập thuộc tính required nếu giá trị truyền vào là true |
| ngMinlength | Number | Thiết lập chiều dài tối thiểu của giá trị nhập vào |
| ngMaxlength | Number | Thiết lập chiều dài tối đa của giá trị nhập vào |
| ngPattern | String | Biểu thức so khớp với giá trị nhập vào |
| ngChange | String | Gọi đến hàm truyền vào khi có sự kiện change |
| ngTrim | Boolean | Nếu thiết lập true thì khi lấy dữ liệu nó sẽ được trim khoảng trắng đầu và cuối |
3. Ví dụ sử dụng Directive input trong AngularJS
Bây giờ chúng ta sẽ làm một ví dụ nho nhỏ đó là xây dựng chức năng đăng nhập với hai thông tin nhập vào là tên đăng nhập và mật khẩu. Các rule như sau:
Bài viết này được đăng tại [free tuts .net]
- Nếu tên đăng nhập là admin và mật khẩu là 123456 thì thông báo là đăng nhập thành công, ngược lại thông báo đăng nhập thất bại.
- Với tên đăng nhập chỉ chấp nhận các ký tự chữ cái và số, bắt buộc nhập và sử dung ng-trim để xóa khoảng trắng và dài từ 3 đến 10 ký tự
- Với mật khẩu dài từ 3 đến 10 ký tự và dùng ng-trim để xóa khoảng trắng
- Nếu những quy tắc trên không thỏa thì các chữ label sẽ có màu đỏ (dùng css style cho class
ng-invalidcó color:red)
Nội dung như sau:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ví dụ sử dụng Directive ng-Form</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<style>
.ng-invalid{
color:red;
}
</style>
<script>
angular.module('myapp', [])
.controller('ExampleController', ['$scope', function($scope) {
// Khi submit form thì chạy hàm này
$scope.login = function()
{
// nếu người dùng có nhập nội dung thì lưu nó vào list
if ($scope.username == 'admin' && $scope.password == '123456'){
alert('Đăng Nhập Thành Công');
}
else {
alert('Đăng Nhập Thất Bại');
}
};
}]);
</script>
</head>
<body ng-app="myapp">
<h1>Đăng Nhập</h1>
<form ng-controller="ExampleController" name="myForm" ng-submit="login()">
User name: <br/>
<input type="text" name="userName" ng-pattern="/^([a-zA-Z0-9]+)$/" ng-model="username" ng-trim="true" required ng-minlength="3" ng-maxlength="10" /> <br/>
Password: <br/>
<input type="text" name="userPass" ng-model="password" required ng-minlength="3" ng-maxlength="10" ng-trim="true"> <br/><br/>
<input type="submit" value='Login'/>
</form>
</body>
</html>
Chạy lên và thưởng thức nhé các bạn, mỗi đoạn code đều đáp ứng yêu cầu của đề bài.
3. lời kết
Công nhận mấy bài này ngắn thật, mới đọc một chút xíu đã hết rồi :D. Trong bài này các bạn chỉ cần hiểu rằng khi làm việc với input trong angularjs thì nó có hỗ trợ chúng ta những directive giúp validate thông tin của form như chiều dài tối thiểu và tối đa, dựa vào những directive này thì ta hoàn toàn kiểm soát được dữ liệu người dùng nhập vào. ở những bài tiếp theo chúng ta sẽ tìm hiểu từng thành phần luôn nhé.
