ng hide và ng show
app.js
AngularJS
(function () {
var app = angular.module('app', []);
app.controller('showHideCtrl', showHideCtrl);
showHideCtrl.$inject = ['$scope'];
function showHideCtrl($scope) {
var employees = [{
name: 'Hải',
birthDate: new Date('12/3/1989'),
salary: 15000000,
gender: 'Male',
status: true
},
{
name: 'Hoàng',
birthDate: new Date('6/15/1990'),
salary: 12000000,
gender: 'Male',
status: true
},
{
name: 'Long',
birthDate: new Date('1/14/1992'),
salary: 17000000,
gender: 'Male',
status: false
},
{
name: 'Trung',
birthDate: new Date('12/3/1993'),
salary: 12000000,
gender: 'Male',
status: true
},
{
name: 'Hương',
birthDate: new Date('12/3/1995'),
salary: 11000000,
gender: 'Female',
status: false
},
{
name: 'Thủy',
birthDate: new Date('12/3/1988'),
salary: 10000000,
gender: 'Female',
status: true
}
];
$scope.employees = employees;
$scope.sortColumn = 'name';
$scope.reverse = false;
$scope.searchText = '';
$scope.hideSalary = false;
$scope.sortData = function (column) {
if ($scope.sortColumn == column)
$scope.reverse = !$scope.reverse;
else
$scope.reverse = false;
$scope.sortColumn = column;
}
$scope.getSortClass = function (column) {
if ($scope.sortColumn == column) {
return $scope.reverse ? 'arrow-up' : 'arrow-down';
}
return '';
}
}
app.filter('status', function () {
return function (input) {
if (input == true)
return 'Kích hoạt';
else
return 'Khóa';
}
});
})()
index.html
AngularJS
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="../srcipts/angular.js"></script>
<script src="/session12/app.js"></script>
<style>
table thead tr{
cursor:pointer;
}
/*This class displays the UP arrow*/
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid black;
display: inline-block;
}
/*This class displays the DOWN arrow*/
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid black;
display: inline-block;
}
</style>
</head>
<body ng-app="app">
<div ng-controller="showHideCtrl">
Search: <input type="text" ng-model="searchText" />
<label>
<input type="checkbox" ng-model="hideSalary" />
Hide salary
</label>
<table class="table">
<thead>
<tr>
<td ng-click="sortData('name')">
Name
<div ng-class="getSortClass('name')"></div>
</td>
<td ng-click="sortData('birthDate')">
Date of Birth
<div ng-class="getSortClass('birthDate')"></div>
</td>
<td ng-hide="hideSalary" ng-click="sortData('salary')">
Salary
<div ng-class="getSortClass('salary')"></div>
</td>
<td ng-show="hideSalary" ng-click="sortData('salary')">
Salary
<div ng-class="getSortClass('salary')"></div>
</td>
<td ng-click="sortData('gender')">
Gender
<div ng-class="getSortClass('gender')"></div>
</td>
<td ng-click="sortData('status')">
Status
<div ng-class="getSortClass('status')"></div>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | orderBy:sortColumn:reverse | filter:searchText">
<td>{{employee.name | uppercase}}</td>
<td>{{employee.birthDate | date:"dd/MM/yyyy"}}</td>
<td ng-hide="hideSalary">{{employee.salary | currency:""}}</td>
<td ng-show="hideSalary">xxxxxxx</td>
<td>{{employee.gender | lowercase}}</td>
<td>{{employee.status | status}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Nguồn TEDU
0 nhận xét:
Post a Comment