var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
//currentEmployeeData.RecordsOfJSONS
$scope.mydata = [
{name: 'foo', startDate: '2016-01-01', endDate: '2016-01-31', status:'created' },
{name: 'bar', startDate: '2016-01-01', endDate: '2016-01-31', status:'pending' },
{name: 'baz', startDate: '2016-01-01', endDate: '2016-01-31', status:'created' },
{name: 'qux', startDate: '2016-01-01', endDate: '2016-01-31', status:'created' }]
}).directive("csHolidayTable", [function () {
return {
restrict: "E",
scope: {
records: "=",
filterconditions: "=",
checkboxcondition: "="
},
template:'<table class="cs-table-01">' +
'<thead> <tr>' +
'<th>Employee</th>' +
'<th>Start date</th>' +
'<th>End date</th>' +
'<th>Status</th>' +
'<th>Select</th>' +
' </tr> </thead> ' +
'<tbody> <tr ng-repeat="oneRecord in records | filter : filterconditions">' +
'<td>{{oneRecord.name}}</td> ' +
'<td>{{oneRecord.startDate}}</td> ' +
'<td>{{oneRecord.endDate}}</td>' +
'<td>{{oneRecord.status}}</td> '+
'</tr></tbody></table>',
};
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{ name }}!</p>
<cs-holiday-table records="mydata" checkboxcondition = "'pending'" filterconditions="{ 'status': 'pending' }"></cs-holiday-table>
</body>
</html>
/* Put your css in here */