We use the custom gender filter like any other angular built-in filter with a pipe character:
In this custom filter that converts integer values 1, 2, 3 to Male, Female and Not disclosed respectively. gender is the name of the filter.
Controler:
var app = angular
.module("myModule", [])
.filter("gender", function () {
return function (gender) {
switch (gender) {
case 1:
return "Male";
case 2:
return "Female";
case 3:
return "Not disclosed";
}
}
})
.controller("myController", function ($scope) {
var employees = [
{ name: "Ben", gender: 1, salary: 55000 },
{ name: "Sara", gender: 2, salary: 68000 },
{ name: "Mark", gender: 1, salary: 57000 },
{ name: "Pam", gender: 2, salary: 53000 },
{ name: "Todd", gender: 3, salary: 60000 }
];
$scope.employees = employees;
});
HtmlPage1.html :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td> {{ employee.name }} </td>
<td> {{ employee.gender | gender}} </td>
<td> {{ employee.salary }} </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
In this custom filter that converts integer values 1, 2, 3 to Male, Female and Not disclosed respectively. gender is the name of the filter.
Controler:
var app = angular
.module("myModule", [])
.filter("gender", function () {
return function (gender) {
switch (gender) {
case 1:
return "Male";
case 2:
return "Female";
case 3:
return "Not disclosed";
}
}
})
.controller("myController", function ($scope) {
var employees = [
{ name: "Ben", gender: 1, salary: 55000 },
{ name: "Sara", gender: 2, salary: 68000 },
{ name: "Mark", gender: 1, salary: 57000 },
{ name: "Pam", gender: 2, salary: 53000 },
{ name: "Todd", gender: 3, salary: 60000 }
];
$scope.employees = employees;
});
HtmlPage1.html :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td> {{ employee.name }} </td>
<td> {{ employee.gender | gender}} </td>
<td> {{ employee.salary }} </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
No comments:
Post a Comment