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.

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.