Grid in AngularJs Example

Grid in AngularJs Example

One of the famous topic from AngularJS is grid layout. Here we’ll discuss and demonstrate an example to showcase how to create a grid. With the help of ng-grid directive, one can easily create an grid structure. In order to create we’d need our data to be in JSON format.

Let see an example to understand better-

<html ng-app="myApp">
<head>
    <title>Grid view</title>
</head>
 
<link href="lib/ng-grid.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="lib/angular/angular.js" type="text/javascript"></script>
<script src="lib/angular/ng-grid-2.0.11.min.js" type="text/javascript"></script>
<script>

    var myApp = angular.module("myApp", ['ngGrid']).controller("gridController", function ($scope) {
        $scope.details =
               [{ FullName: "Code2Succeed-1", age: "age: 1", Address: "Address: Code2Succeed-1" },
                     { FullName: "Code2Succeed-2", age: "age: 2", Address: "Address: Code2Succeed-2" },
                     { FullName: "Code2Succeed-3", age: "age: 3", Address: "Address: Code2Succeed-3" },
                     { FullName: "Code2Succeed-4", age: "age: 4", Address: "Address: Code2Succeed-4" },
                     { FullName: "Code2Succeed-5", age: "age: 5", Address: "Address: Code2Succeed-5" },
                     { FullName: "Code2Succeed-6", age: "age: 6", Address: "Address: Code2Succeed-6" },
                     { FullName: "Code2Succeed-7", age: "age: 7", Address: "Address: Code2Succeed-7" },
                     { FullName: "Code2Succeed-8", age: "age: 8", Address: "Address: Code2Succeed-8" },
                     { FullName: "Code2Succeed-9", age: "age: 9", Address: "Address: Code2Succeed-9" },
                     { FullName: "Code2Succeed-10", age: "age: 10", Address: "Address: Code2Succeed-10" }
                     ];

        $scope.gridView = { data: 'details' };
    });
</script>

<body ng-controller="gridController">
<div style="border: 1px solid rgb(212,212,212); width:100%; height:100%" ng-grid="gridView"></div>
</body>
</html>

Output

grid

As we can see the data which is in JSON format is automatically populated with key names as title of respective columns.

 

Leave a Reply

Your email address will not be published. Required fields are marked *