Monday, 16 September 2019

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"},
]}

Best Related Posts are Following:

  1. MongoDb PHP functions Questions and Answers.
  2. How to Configure MongoDB with PHP for WampServer on Windows.
  3. MongoDb Technical Interview Questions and Answers.
  4. MongoDB Interview Questions and Answers.
  5. How to install MongoDB install on window 7.
  6. MongoDB - Where and Why should we use MongoDb?.
  7. Advance MongoDB Interview Questions and Answer.
  8. MongoDB Interview Questions and Answer on Database.
  9. MongoDB Database Commands with Examples.
  10. Comparison between MySQL and MongoDB.
Labels: ,