ANGULARJS
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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

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.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Để 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.

Cùng chuyên mục:

Thiết lập project với Angular 6

Thiết lập project với Angular 6

Ở bài trước, chúng ta đã tìm hiểu cách cài đặt môi trường cũng như…

Cài đặt môi trường cho Angular 6

Cài đặt môi trường cho Angular 6

Ở bài trước, chúng ta đã tìm hiểu vì sao chọn Angular, Angular 6 là…

Giới thiệu Angular 6x

Giới thiệu Angular 6x

Xin giới thiệu với các bạn tổng quan tất cả các bài viết học về…

Ứng dụng single page Angular 4

Ứng dụng single page Angular 4

Trong bài học này, chúng ta sẽ thực hành tạo một ứng dụng single page…

Angular 4 CLI

Angular 4 CLI

Trong bài này, chúng ta cùng tìm hiểu về Angular CLI, cách cài đặt và…

Angular 4 Material

Angular 4 Material

Trong bài này, chúng ta sẽ tìm hiểu về material - các thành phần được…

Animation trong Angular 4

Animation trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về animation trong Angular 4.

Form trong Angular 4

Form trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về form trong Angular 4, 2 cách…

Http service trong Angular 4

Http service trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về http service trong Angular 4.

Service trong Angular 4

Service trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về service trong Angular 4

Routing trong Angular 4

Routing trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về routing - cơ chế kiểm soát…

Pipe trong angular 4

Pipe trong angular 4

Trong bài này, chúng ta sẽ tìm hiểu về pipe trong Angular 4.

Directive trong Angular 4

Directive trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về directive trong Angular 4, cách tạo…

Template trong Angular 4

Template trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về template trong Angular 4

Event binding trong Angular 4

Event binding trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về event binding - cơ chế kiểm…

Data binding trong Angular 4

Data binding trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về data binding - cơ chế lấy…

Module trong Angular 4

Module trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về module trong Angular 4: cách khai…

Component trong Angular 4

Component trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về component - thành phần được sử…

Tạo project Angular 4 đầu tiên

Tạo project Angular 4 đầu tiên

Ở bài này, chúng ta sẽ đi vào tìm hiểu cách tạo project Angular 4.

Angular 4 - Cài đặt môi trường

Angular 4 - Cài đặt môi trường

Trong bài này mình sẽ hướng dẫn các bạn cài đặt một số phần mềm…

Top