Ví dụ Directive input trong AngularJS

Ví dụ Directive input trong AngularJS là vấn đề được nhiều lập trình viên quan tâm, bởi những kiến thức trên trường lớp là không đủ, vì vậy bài Ví dụ Directive input trong AngularJS sẽ chia sẻ tới bạn nhiều thông tin hữu ích

Mọi người vẫn hỏi tôi về việc học lập trình nói chung và AngularJS nói riêng có cần năng khiếu hay quá khó để tiếp cận hay không. Thì tôi có thể trả lời rằng, học lập trình cũng như việc bạn học tiếng Anh hay bất kỳ một ngôn ngữ khác, bởi lập trình...là ngôn ngữ của máy tính, để máy tính đọc và máy tính thực hiện theo yêu cầu của mình, bạn thích là học được.

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.

Lưu ý: Input[type="file"] không support trong Directive ng-model.

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:

  • 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-invalidcolor:red)

Nội dung như sau:

XEM DEMO

<!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> 

Giao diện: 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é.

Hy vọng với bài viết về Ví dụ Directive input trong AngularJS đã giải đáp giúp bạn phần nào về kiến thức lập trình AngularJS. Như tôi đã nói, ngôn ngữ lập trình không quan trọng bằng tư duy giải thuật, tư duy logic để giải quyết vấn đề.

Với những năm trước đây, lập trình viên là một cái nghề khó và kén chọn người học, đồng nghĩa với việc thu nhập hàng tháng của các lập trình viên luôn cao. Còn những năm gần đây, thì lập trình là môn học phổ thông, và ai cũng nên học một ngôn ngữ lập trình nào đó.

Nếu bạn còn bất kỳ câu hỏi nào trong việc học lập trình online, hãy gửi yêu cầu cho tôi qua email hoidapcode.com@gmail.com hoặc để lại comment bên dưới, tôi sẽ giải đáp trong vòng 24 giờ!

Blog hoidapcode.com là blog được tổng hợp tự động các bài học, thông tin về lập trình trên mạng internet. Nếu bạn có ý kiến hoặc đóng góp về bài viết này, hãy liên hệ với tôi!