var app = angular.module('usersboard', ['ui.bootstrap']);
app.service('ReceptionService', function($http) {
this.selectAllCounties = function() {
return $http.get('counties.json');
}
this.selectTotalStatusforAllCounties = function() {
return $http.get('counties-total-status.json');
}
this.selectAllDepartmentGroups = function() {
return $http.get('department-groups.json');
}
this.selectAllUserByCounty = function(countyID) {
return $http.get('counties-all-users');
}
});
app.controller('ReceptionController', function($scope, ReceptionService, $window) {
$scope.countytabs = '';
$scope.totalStatusforAllCounties = '';
$scope.totalStatusforByCounty = '';
$scope.departmentGroups = '';
$scope.totalStatusforByCountyAndDepartmentGroup = '';
$scope.allUserByCountyAndDepartmentGroup = '';
$scope.allUserByCounty = '';
$scope.AllUserInAllDepartmentGroupsGroupByCounties = '';
$scope.AllUsersInDepartmentGroup = '';
$scope.active = {
all: false
};
$scope.content = 'county';
$scope.isShown = function(content) {
return content === $scope.content;
};
var selectAllCounties = function() {
ReceptionService.selectAllCounties().then(function(data) {
$scope.countytabs = data.data;
console.log($scope.countytabs)
}, function(errMsg) {
console.log(errMsg);
});
}
selectAllCounties();
$scope.print = function (divName) {
var printContents = document.getElementById(divName).innerHTML;
var popupWin = window.open('', '_blank', 'width=800,height=700');
popupWin.document.open()
popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</html>');
popupWin.document.close();
}
});
<!DOCTYPE html>
<html ng-app="usersboard">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="ReceptionController">
<div id="content">
<tabset>
<tab ng-repeat="tab in countytabs" ng-click="tab.activate1 = true" heading="{{tab.countyName}}">
<h3>{{tab.countyName}}--{{tab.phoneNumber}} </h3>
<tabset>
<tab heading="All" active="tab.activate1">
<button data-ng-click="print('content1')">Employee List</button>
<div id="content1">
list 1
</div>
</tab>
<tab heading="Detail 1">l
<button data-ng-click="print('content2')">Employee List</button>
<div id="content3">
list 2
</div>
</tab>
<tab heading="Detail 2">
<button data-ng-click="print('content3')">Employee List</button>
<div id="content3">
list 3
</div>
</tab>
</tabset>
</tab>
</tabset>
</div>
</body>
</html>
/* Put your css in here */
[
{
"countyID": "55106868ef338d3f3ba7d7aa",
"countyName": "Edinburg",
"phoneNumber": "(957) 583-2915"
},
{
"countyID": "55106868cbc75f70884868ec",
"countyName": "Wescosville",
"phoneNumber": "(859) 464-3864"
},
{
"countyID": "551068689037013bf82acd6c",
"countyName": "Gerton",
"phoneNumber": "(973) 533-3140"
}
]