<![CDATA[
[script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"][/script]
[script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"][/script]
[style]
.secdsubmenu{position:absolute; right:22px; top:2px; border:1px solid #eee; background:#fff; z-index:99}
.secdsubmenu ul {padding:10px; margin:0}
.secdsubmenu ul li{list-style:none; font-size:13px; color:#333; padding:0; margin:0; white-space:nowrap; border-bottom:1px solid #eee; height:30px; line-height:30px; }
.secdsubmenu ul li a{color:#333; text-decoration:none}
[/style]
<div ng-app="myAppName" ng-controller="myCtrl">
<div class="inputfield">
<input ng-model="$ctrl.query" placeholder="Search" type="text" />
</div>
<table border="1" cellpadding="2" cellspacing="0" style="width: 500pxpx;">
<tbody>
<tr>
<th>Title <button ng-click="sortBy('Title')">></button></th>
<th>Date & Time</th>
<th>Status</th>
<th>Action</th>
</tr>
<tr ng-repeat="x in names| filter:$ctrl.query | orderBy:Title:reverse">
<td>{{x.Title}}</td>
<td>{{x.DateTime}}</td>
<td>{{x.Status}}</td>
<td><a href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#" ng-click="mySubmenu = !mySubmenu">...</a>
<br />
<div class="secdsubmenu" ng-show="mySubmenu">
<ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">Edit</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">Delete</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">View URL</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">Embeded Code</a></li>
</ul>
</div>
</td>
</tr>
</tbody></table>
</div>
[script]
var myApp = angular.module('myAppName', ['ngAnimate']);
myApp.controller('myCtrl', function($scope, $http) {
$http.get("load_data.php")
.then(function(response) {
$scope.names = response.data.records;
});
$scope.mySubmenu = false;
$scope.Title = 'title';
$scope.reverse = true;
$scope.sortBy = function(title) {
$scope.reverse = ($scope.title === title) ? !$scope.reverse : false;
$scope.title = title;
};
});
[/script]]]>
JSON Data load_data.php
{ "records":[
{"Title":"Title 1","DateTime":"Jul 29 2016, 01:00 AM","Status":"Completed"},
{"Title":"Title 2","DateTime":"Jul 28 2016, 02:00 PM","Status":"Completed"},
{"Title":"Title 3","DateTime":"Jul 27 2016, 03:00 AM","Status":"Completed"},
{"Title":"Title 4","DateTime":"Jul 26 2016, 04:00 AM","Status":"Completed"},
{"Title":"Title 5","DateTime":"Jul 25 2016, 05:00 AM","Status":"Completed"},
{"Title":"Title 6","DateTime":"Jul 24 2016, 06:00 AM","Status":"Completed"},
{"Title":"Title 7","DateTime":"Jul 23 2016, 09:00 AM","Status":"Completed"},
]}
