Angular UI Grid To Bind JSON Data

1.Index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
  <div ui-grid="gridOptions" ui-grid-selection class="grid"></div>

</div>

2.App.js

     <script src="script.js"></script>
  </body>
</html>
var app = angular.module('app', ['ui.grid', 'ngResource'])

  .factory('jsonDataFactory', function ($resource) {
    return {
     //save the data.json in same directory
      custData: $resource('data.json', {}, {
        query: {method: 'GET', params: {}, isArray: false}
      }),
   
    };
  });

app.controller('MainCtrl', ['$scope','$resource','jsonDataFactory',  function ($scope,$resource,  jsonDataFactory) {
  $scope.gridOptions = {
    enableRowSelection: true,
    enableSelectAll: true,
    selectionRowHeaderWidth: 35
  };

  $scope.gridOptions.columnDefs = [
    { name: 'empId', displayName: 'ID' },
    { name: 'emplAcno', displayName: 'EmplAcno'},
    { name: 'empName', displayName: 'EmpName'},
    { name: 'empAdd', displayName: 'EmpAddress'},
  ];
 
 
 
jsonDataFactory.custData.query().$promise.then(function(response){
   $scope.CustomerData = response;
   console.log($scope.CustomerData);
   $scope.gridOptions.data = $scope.CustomerData.records;
});


}]);

3.data.json

{"records":[
  {
   "empId": "257905480",
        "emplAcno": "ABC10101102",
        "empName": "BIG CORPORATION",
        "empAdd":"PUDUKKOTTAI"
  },
  {
    "empId": "257905480",
        "emplAcno": "ABC10101102",
        "empName": "BIG CORPORATION",
        "empAdd":"TRICHY"
  }

]

}
screen:



Comments

Post a Comment

Popular posts from this blog

my reframce

use ReportServerTempDB select *from dbo.ChunkData INNER JOIN [ChunkSegmentMapping] on ChunkSegmentMapping.ChunkId = ChunkData.ChunkID INNER JOIN [PersistedStream] on PersistedStream.SessionID = ChunkData.SnapshotDataID use ReportServerTempDB select *from dbo.Segment select *from dbo.ChunkData alter procedure selectsubquery as declare @department varchar(50) begin --select *from dbo.Segment where SegmentId = (select *from  dbo.Segment where Content= @department) select * from SegmentId where emp_add =(select *  from dbo.Segment where Content =@department) end exec selectsubquery "1" create view selectall as select *from Segment select *from selectall drop view selectall drop procedure selectsubquery create index test_index on ChunkData(SnapshotDataID) drop index ChunkData.test_index select *from dbo.Segment create database testdbset create table userse (userid int ,name varchar(50)) drop table users select * from users --insert into use...
Read more
Image
Login And Sign Up Using Angular js with help of local storage 1.index.html <html ng-app='LogIn'> <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>LOG IN</title>     <!-- styling css -->     <link href="assets/css/bootstrap.min.css" rel="stylesheet" />     <link href="assets/css/style.css" rel="stylesheet">     <link href="assets/css/font-awesome.min.css" rel="stylesheet">     <!-- min scripts -->     <script src="assets/js/angular.min.js"></script>     <script src="assets/js/angular-route.min.js"></script>     <script src="assets/js/jquery.min.js"></script>   ...
Read more