How to display a table list as grid with few details like Name,State,Designation.Below code snippet contains the angualarjs code to display the data.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Example and Demo of list data in a table using angular js</title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div ng-app="TableApp" ng-controller="TableListController"> <table class="table able-bordered"> <tr style="background-color:grey"> <td>Name</td> <td>State</td> <td>Designation</td> </tr> <tr ng-repeat='results in personsdetails'> <td>{{results.Name}}</td> <td>{{results.State}}</td> <td>{{results.Designation}}</td> </tr> </table> </div> <script> var testapp=angular.module('TableApp',[]); testapp.controller('TableListController',function($scope) { $scope.personsdetails=[ {"Name":"Vasanthan","State":"Kerala","Designation":"Software Engineer"}, {"Name":"Dinesh","State":"Karnataka","Designation":"Team Lead"}, {"Name":"Vinod","State":"Kerala","Designation":"Software Engineer"}, {"Name":"Martin","State":"UP","Designation":"Software Engineer"}, ]; }); </script> </body> </html> |