ạo tabs với ng-show & ng-class & ng-click trong angularjs - AngularJS căn bản
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 ...
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 tabng-classđể xác định thêm class vào tab đang active
Ta bắt đầu nhé 
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:
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àmisActiveTabvới tham số là1. Nếu hàm đó trả về true thì classactivesẽ được thêm vàong-show="current_tab == 1"sẽ quyết định hiển thị div đó nếu giá trị biếncurrent_tabnằm trong $scope của controller bằng1, 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àmchangeTabvới tham số truyền vào là 1, hàm đó có nhiệm vụ là chuyểncurrent_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 - Zaidap.com.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: Zaidap.com.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 Zaidap.com.net.
