Ví dụ Directive input checkbox trong AngularJS

Ví dụ Directive input checkbox 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 checkbox 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.

Checkbox dùng để lấy thông tin của người dùng ở dạng multiselect, nghĩa là người dùng có thể chọn 1 hoặc nhiều checkbox. Trong AngularJS thì checkbox chức năng cũng không khác gì mấy, mục đích cũng là lấy thông tin của người dùng mà thôi.

Để khai báo một input là checkbox thì ta sẽ sử dụng thuộc tính type="checkbox", như vậy là ta đã có một checkbox rồi đấy, và thông thường khi ta thiết lập giá trị cho checkbox thì ta dùng thuộc tính value="giá trị". Nhưng AngularJS thì có cách khác, chi tiết mời bạn đọc phần dưới đây.

1. Danh sách các Directive, tham số của checkbox

Tên Giá trị Mô tả ngModel String Tên liên kết với $scope name String Tên của checkbox ngTrueValue Biểu thức Biểu thức được thiết lập khi checked ngFalseValue Biểu thức Biểu thức được thiết lập khi không checked ngChange String Hàm sẽ gọi tới khi input checked hoặc hủy bỏ checked

2. Ví dụ cách sử dụng checkbox trong AngularJS

Bây giờ chúng ta thực hiện ví dụ sau đây, tạo hai checkbox và thiết lập checkbox thứ nhất khi checked là 'Có' và khi không checked là 'KHÔNG', tương tự cho checked thứ hai.

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) {
                    $scope.game = 'KHÔNG';
                    $scope.tour = 'KHÔNG';
                }]);
        </script>
    </head>
    <body ng-app="myapp">
        <H1>Sở thích bạn là gì?</H1>
        <form name="myForm" ng-controller="ExampleController">
            Chơi Game: <input type="checkbox" ng-model="game"
                              ng-true-value="'CÓ'" ng-false-value="'KHÔNG'"/> <br/>
            Du Lịch: <input type="checkbox" ng-model="tour"
                            ng-true-value="'CÓ'" ng-false-value="'KHÔNG'"/> <br/>
            <h4>Bạn đang chọn</h4>
            <tt>Chơi Game = {{game}}</tt><br/>
            <tt>Du Lịch = {{tour}}</tt><br/>
        </form>
    </body>
</html> 

Giao diện:'

Có một lưu ý trong ví dụ này là giá trị bên trong ng-true-value và ng-false-value phải được bao quanh bởi dấu nháy đơn nhé. 

Bây giờ các bạn tự thực hành bằng cách thêm một Directive ng-change xem có được không nhé.

3. Lời kết

Bài này tới đây là hết rồi, nhớ là nắm vững checkbox này rồi hãy qua bài tiếp theo nhé, chúng ta nên đi từng bước một.

Hy vọng với bài viết về Ví dụ Directive input checkbox 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!