HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script src="angular.js"></script>
<script src="app.js"></script>
<title></title>
<meta charset="utf-8" />
</head>
<body ng-controller="MainCtrl">
<employee-detail></employee-detail>
</body>
</html>
JS
/// <reference path="angular.js" />
var app = angular.module('plunker', []);
app.directive('employeeDetail', function () {
return {
restrict: 'E',
template: [
'<div>',
'<p>0',
'<input type="range" min="0"
max="100" step="1" ng-model="ctrl.inputAge"
/>',
'100</p>',
'<span>current min age: {{ ctrl.inputAge
}}</span>',
'<ul>',
'<table border="1" cellpadding="6"
cellspacing="0">',
'<tr><td>Employee
Name</td><td>Employee
Age</td><td>Address</td></tr>',
'<tr ng-repeat="person in ctrl.people |
ageFilter:ctrl.inputAge
"><td>{{person.name}}</td><td>{{person.age}}</td><td>{{person.address}}</td></tr>',
'</table>',
'</ul>',
'</div>'
].join(''),
controllerAs: "ctrl",
controller: function () {
var ctrl = this;
ctrl.inputAge = 20;
ctrl.people = [{
name: 'Justin Bieber',
address: 'Powai',
age: 21
}, {
name: 'Miley Cyrus',
address: 'Powai',
age: 23
}, {
name: 'John Legend',
address: 'Powai',
age: 37
}, {
name: 'Betty White',
address: 'Powai',
age: 94
}, {
name: 'Roger Waters',
address: 'Powai',
age: 72
}, {
name: 'Larry Page',
address: 'Powai',
age: 42
}, {
name: 'Kevin george',
address: 'Powai',
age: 10
}]
}
}
}).filter('ageFilter', function () {
return function (input, minAge) {
return input.filter(function (person) {
return person.age
>= +minAge;
});
}
});
