Filter có sẵn
Cách sử dụng
Filter tự định nghĩa
app.js
AngularJS
(function () {
var app = angular.module('app', []);
app.controller('filterDemoCtrl', filterDemoCtrl);
filterDemoCtrl.$inject = ['$scope'];
function filterDemoCtrl($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.limitRow = 3;
}
/*-- Sử dụng filter status tự định nghĩa --*/
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="/session8/app.js"></script>
</head>
<body ng-app="app">
<div ng-controller="filterDemoCtrl">
Show: <input type="number" ng-model="limitRow"/>
<table class="table">
<tr>
<td>Name</td>
<td>Date of Birth</td>
<td>Salary</td>
<td>Gender</td>
<td>Status</td>
</tr>
<tr ng-repeat="employee in employees | limitTo:limitRow">
<td>{{employee.name | uppercase}}</td>
<td>{{employee.birthDate | date:"dd/MM/yyyy"}}</td>
<td>{{employee.salary | currency:""}}</td>
<td>{{employee.gender | lowercase}}</td>
<td>{{employee.status | status}}</td>
</tr>
</table>
</div>
</body>
</html>
0 nhận xét:
Post a Comment