970_90

Friday, 2 September 2016

Angularjs listing example with JSON

Angularjs listing example with JSON



[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')">&gt;</button></th>
            <th>Date &amp; 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"},
]}

No comments:

Post a Comment