Tạo tabs với ng-show & ng-class & ng-click trong angularjs

DEMO

AngularJS Version: 1.3.2

Qua những bài lý thuyết của serie angularjs toàn tập thì chúng ta sẽ vận dụng nó để tạo một chức năng cũng khá là phổ biến trong các website hiện nay đó là tạo tabs. Thông thường chúng ta sử dụng jQuery để giải đáp cho bài này nhưng chúng ta đang học AngularjS nên trong bài này chúng ta sử dụng các Directive trong AngularJS để tạo tabs. 

Để tạo được tabs trong AngularJS thì chúng ta sử dụng:

  • Xây dựng HTML và CSS hiển thị tabs
  • ng-show để xác định content của tabs nào sẽ hiển thị
  • ng-click để xử lý sự kiện click tab
  • ng-class để xác định thêm class vào tab đang active

Ta bắt đầu nhé yes

1. Xây dựng HTML và CSS hiển thị tabs

HTML

<div class="tabs-heading">
    <a href="#" class="active">Tab 1</a>
    <a href="#">Tab 2</a>
    <a href="#">Tab 3</a>
</div>
<div class="tabs-content">
    <div class="active">
        <h1>Nội dung của tab 1</h1>
    </div>
    <div style='display: none'>
        <h1>Nội dung của tab 2</h1>
    </div>
    <div style='display: none'>
        <h1>Nội dung của tab 3</h1>
    </div>
</div>
Trong phần này tôi có ẩn hai tabs content (style='display: none') và cho hiển thị tab đầu tiên, đồng thơi trên heading của tab tui cho tab đâu tiên có class là active mục đích là dùng test CSS. Sau khi xong chúng ta sẽ bỏ nó đi và sử dụng AngularJS chứ không phải gán tay như vậy.

CSS

.tabs-heading{
    padding: 20px 20px 0px 20px;
    height: 30px;
    border: solid 1px gray;
    border-radius: 5px 5px 0px 0px;
    background-color: #cae8fd;
}
.tabs-heading a{
    display: inline-block;
    padding: 0px 20px;
    height: 30px;
    line-height: 30px;
    z-index: 1;
    color: blue;
    text-transform: uppercase;
    text-decoration: none;
}
.tabs-heading a.active{
    height: 30px;
    border: solid 1px gray;
    border-bottom: none;
    background-color: #FFF;
}
.tabs-content{
    border: solid 1px gray;
    border-top: none;
    min-height: 200px;
    padding: 10px;
}
Giao diện như sau:

tao-tabs-voi-angularjs-1.png

2. Xây dựng các hàm angular xử lý tabs

Các bạn tạo một đoạn mã AngularJS với nội dung như sau:

angular.module('ngTabExample', [])
    .controller('TabController', function($scope){
        // $scope index lưu trữ tab hiện tại, ban đầu gán nó = tab1
        $scope.current_tab = 1;

        // Hàm đổi tab
        $scope.changeTab = function(index){
            $scope.current_tab = index;
        };

        // Hàm kiểm tra có phải tab hiện tại hay không
        // hàm này sẽ trả về true/false và dùng kết hợp
        // với ng-class để active menu
        $scope.isActiveTab = function(index){
            return index === $scope.current_tab;
        };
    });
Trong phần comment mình đã giải thích rồi, các bạn đọc ở đó nhé

3. Gán các Angular directive vào trong các thẻ HTML của tabs

Các bạn sửa lại phần HTML hiển thị tabs như sau:

<body ng-app="ngTabExample" ng-controller="TabController">
    <div class="tabs-heading">
        <a href="#" ng-class="{active:isActiveTab(1)}" ng-click="changeTab(1)" onclick='return fasle'>Tab 1</a>
        <a href="#" ng-class="{active:isActiveTab(2)}" ng-click="changeTab(2)" onclick='return fasle'>Tab 2</a>
        <a href="#" ng-class="{active:isActiveTab(3)}" ng-click="changeTab(3)" onclick='return fasle'>Tab 3</a>
    </div>
    <div class="tabs-content">
        <div ng-show="current_tab == 1">
            <h1>Nội dung của tab 1</h1>
        </div>
        <div ng-show="current_tab == 2">
            <h1>Nội dung của tab 2</h1>
        </div>
        <div  ng-show="current_tab == 3">
            <h1>Nội dung của tab 3</h1>
        </div>
    </div>
</body>
Để hiểu rõ chức năng của từng Directive thì bạn phải quay lại từng bài để học thôi, tôi chỉ giải thích qua như thế này:

  • ng-class="{active:isActiveTab(1)}" sẽ gọi tới hàm isActiveTab với tham số là 1. Nếu hàm đó trả về true thì class active sẽ được thêm vào
  • ng-show="current_tab == 1" sẽ quyết định hiển thị div đó nếu giá trị biến current_tab nằm trong $scope của controller bằng 1, ngược lại nó sẽ không hiển thị
  • ng-click="changeTab(1)" khi click vào sẽ gọi tới hàm changeTab với tham số truyền vào là 1, hàm đó có nhiệm vụ là chuyển current_tab

4. Nội dung toàn file tabs trong angularjs

Chúng ta có toàn file như sau:

<!doctype html>
<html lang="vi">
    <head>
        <meta charset="UTF-8">
        <title>Ví dụ Tabs trong AngularJS - Freetuts.net</title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
        <style>
            *{margin:0;padding:0}
            body{margin:20px;}
            .tabs-heading{
                padding: 20px 20px 0px 20px;
                height: 30px;
                border: solid 1px gray;
                border-radius: 5px 5px 0px 0px;
                background-color: #cae8fd;
            }
            .tabs-heading a{
                display: inline-block;
                padding: 0px 20px;
                height: 30px;
                line-height: 30px;
                z-index: 1;
                color: blue;
                text-transform: uppercase;
                text-decoration: none;
            }
            .tabs-heading a.active{
                height: 30px;
                border: solid 1px gray;
                border-bottom: none;
                background-color: #FFF;
            }
            .tabs-content{
                border: solid 1px gray;
                border-top: none;
                min-height: 200px;
                padding: 10px;
            }
            
        </style>
        <script>
            /*
             * Author: thehalfheart@gmail.com
             * Website: freetuts.net
             */
            angular.module('ngTabExample', [])
                .controller('TabController', function($scope){
                    // $scope index lưu trữ tab hiện tại, ban đầu gán nó = tab1
                    $scope.current_tab = 1;
                    
                    // Hàm đổi tab
                    $scope.changeTab = function(index){
                        $scope.current_tab = index;
                    };
                    
                    // Hàm kiểm tra có phải tab hiện tại hay không
                    // hàm này sẽ trả về true/false và dùng kết hợp
                    // với ng-class để active menu
                    $scope.isActiveTab = function(index){
                        return index === $scope.current_tab;
                    };
                });
        </script>
    </head>
    <body ng-app="ngTabExample" ng-controller="TabController">
        <div class="tabs-heading">
            <a href="#" ng-class="{active:isActiveTab(1)}" ng-click="changeTab(1)">Tab 1</a>
            <a href="#" ng-class="{active:isActiveTab(2)}" ng-click="changeTab(2)">Tab 2</a>
            <a href="#" ng-class="{active:isActiveTab(3)}" ng-click="changeTab(3)">Tab 3</a>
        </div>
        <div class="tabs-content">
            <div ng-show="current_tab == 1">
                <h1>Nội dung của tab 1</h1>
            </div>
            <div ng-show="current_tab == 2">
                <h1>Nội dung của tab 2</h1>
            </div>
            <div  ng-show="current_tab == 3">
                <h1>Nội dung của tab 3</h1>
            </div>
        </div>
    </body>
</html>

Lời kết

Bài này cũng tương đối đơn giản nhưng nó là những bài tập về angularjs giúp chúng ta nắm vững và biết các vận dụng các directive thông dụng trong angular để xây dựng các chức năng của website. Chúc các bạn vui vẻ khi tham khảo các serie học lập trình AngularJS trên website Freetuts.net.

Khóa học Angular 1x kết hợp với PHP và MySQL rất hay

Nếu bạn đang tìm hiểu Angular 1x + PHP/MySQL thì hãy tham khảo khóa học tạo ứng dụng Angular này, đây là khóa học được biên soạn bởi anh Việt, giảng viên tại fedu.vn. Trong khóa học này bạn sẽ được hướng dẫn sử dụng Angular 1  để hiển thi dữ liệu được trả về từ Server (PHP và MySQL).

Nguồn: freetuts.net