<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<script data-require="ng-table@*" data-semver="0.3.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>
<link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
<link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="main" ng-controller="DemoCtrl">
<h3>My Organisations</h3>
<div class="row">
<div class="col-md-12">
<table ng-table="tableParams" show-filter="true" class="table myorgs">
<tr ng-repeat-start="org in $data">
<td style="width: 250px" data-title="'Name'" sortable="'Name'" filter="{ 'Name': 'text' }"><a
href="#/orgDetail/{{org.OrgId}}">{{org.Name}}</a></td>
<td data-title="'Other Names'">{{org.OtherName}}</td>
<td data-title="'Service Type'">
General Practice /GP,<br/>
Psychology,<br/>
Physiotherapy<br/>
<button ng-if="org.expanded" ng-click="org.expanded = false"><span
class="glyphicon glyphicon-minus"></span></button>
<button ng-if="!org.expanded" ng-click="org.expanded = true"><span
class="glyphicon glyphicon-plus"></span></button>
</td>
<td data-title="'Location'">36 Main Street<br/>
Mornington<br/>
VIC 3931
</td>
<td data-title="'Contact Details'">
<table>
<tr>
<td>Phone:</td>
</tr>
<tr>
<td>Fax:</td>
</tr>
<tr>
<td>Email:</td>
</tr>
<tr>
<td>Website:</td>
</tr>
</table>
</td>
<!--<td data-title="'Last Updated'" sortable="'Modified'">{{org.Updated}}</td>-->
<td data-title="'Last Updated'">today</td>
</tr>
<tr ng-if="org.expanded" ng-repeat-end>
<td></td>
<td></td>
<td colspan="4">
<table class="table">
<tr>
<td style="width: 194px">General Practice /GP</td>
<td style="width: 103px">
<table>
<tr>
<td>Suite 5, 36 Main Street</td>
</tr>
<tr>
<td>MORNINGTON</td>
</tr>
<tr>
<td>VIC 3931</td>
</tr>
</table>
</td>
<td style="width: 150px">
<table>
<tr>
<td>Phone:</td>
</tr>
<tr>
<td>Fax:</td>
</tr>
<tr>
<td>Email:</td>
</tr>
<tr>
<td>Website:</td>
</tr>
</table>
</td>
<td style="width: 104px">Yesterday</td>
</tr>
<tr>
<td>Psychology</td>
<td>
<table>
<tr>
<td>Level 2, n36 Main street</td>
</tr>
<tr>
<td>MORNINGTON</td>
</tr>
<tr>
<td>VIC 3931</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Phone:</td>
</tr>
<tr>
<td>Fax:</td>
</tr>
<tr>
<td>Email:</td>
</tr>
<tr>
<td>Website:</td>
</tr>
</table>
</td>
<td>Yesterday</td>
</tr>
<tr>
<td>Physiotherapy</td>
<td>
<table>
<tr>
<td>Level 1, 36 Main Street</td>
</tr>
<tr>
<td>MORNINGTON</td>
</tr>
<tr>
<td>VIC 3931</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Phone:</td>
</tr>
<tr>
<td>Fax:</td>
</tr>
<tr>
<td>Email:</td>
</tr>
<tr>
<td>Website:</td>
</tr>
</table>
</td>
<td>Yesterday</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<button class="btn btn-info" ng-click="createOrganisation()">Create Organisation</button>
</body>
</html>
var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, ngTableParams) {
var data=
[
{
"OrgId":1,
"OtherName":"Pear Medical Center",
"Name": "Apple Medical Center",
"Type": "Medical Services",
"Location": "15 Martin Pl, Sydney NSW Australia 2000",
"updated": "5 days ago"
},
{
"OrgId":2,
"OtherName":"Pear Medical Center",
"Name": "One-Stop Medical & Dental",
"Type": "Dental Services, General Medical Service",
"Location": "44a George St, Sydney NSW Australia 2000",
"updated": "Over 1 year ago"
},
{
"OrgId":3,
"OtherName":"Pear Medical Center",
"Name": "Some Medical Center",
"Type": "Medical Services",
"Location": "15 King St, Sydney NSW Australia 2000",
"updated": "21 days ago"
},
{
"OrgId":4,
"OtherName":"Pear Medical Center",
"Name": "Surrey Hills Dental Clinic",
"Type": "Dental Services",
"Location": "1 ABC Ave, Surry Hills NSW Australia 2000",
"updated": "Today"
},
{
"OrgId":5,
"Name": "Sydney Dental Clinic",
"Type": "Dental Services",
"Location": "36 Ryder Ave, Sydney NSW Australia 2000",
"updated": "Yesterday"
},
{
"OrgId":6,
"Name": "Apple Medical Center",
"Type": "Medical Services",
"Location": "15 Martin Pl, Sydney NSW Australia 2000",
"updated": "5 days ago"
},
{
"OrgId":7,
"Name": "One-Stop Medical & Dental",
"Type": "Dental Services, General Medical Service",
"Location": "44a George St, Sydney NSW Australia 2000",
"updated": "Over 1 year ago"
},
{
"OrgId":8,
"Name": "Some Medical Center",
"Type": "Medical Services",
"Location": "15 King St, Sydney NSW Australia 2000",
"updated": "21 days ago"
},
{
"OrgId":9,
"Name": "Surrey Hills Dental Clinic",
"Type": "Dental Services",
"Location": "1 ABC Ave, Surry Hills NSW Australia 2000",
"updated": "Today"
},
{
"OrgId":10,
"Name": "Sydney Dental Clinic",
"Type": "Dental Services",
"Location": "36 Ryder Ave, Sydney NSW Australia 2000",
"updated": "Yesterday"
},
{
"OrgId":11,
"Name": "Apple Medical Center",
"Type": "Medical Services",
"Location": "15 Martin Pl, Sydney NSW Australia 2000",
"updated": "5 days ago"
},
{
"OrgId":12,
"Name": "One-Stop Medical & Dental",
"Type": "Dental Services, General Medical Service",
"Location": "44a George St, Sydney NSW Australia 2000",
"updated": "Over 1 year ago"
},
{
"OrgId":13,
"Name": "Some Medical Center",
"Type": "Medical Services",
"Location": "15 King St, Sydney NSW Australia 2000",
"updated": "21 days ago"
},
{
"OrgId":14,
"Name": "Surrey Hills Dental Clinic",
"Type": "Dental Services",
"Location": "1 ABC Ave, Surry Hills NSW Australia 2000",
"updated": "Today"
},
{
"OrgId":15,
"Name": "Sydney Dental Clinic",
"Type": "Dental Services",
"Location": "36 Ryder Ave, Sydney NSW Australia 2000",
"updated": "Yesterday"
},
{
"OrgId":16,
"Name": "Apple Medical Center",
"Type": "Medical Services",
"Location": "15 Martin Pl, Sydney NSW Australia 2000",
"updated": "5 days ago"
}
]
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: data.length, // length of data
getData: function($defer, params) {
$defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
})
body {
padding: 10px !important;
}
.ng-table th {
-moz-user-select: none;
text-align: left;
}