loading ng-grid with ng-click

Question

I am trying to load an ng-grid when a button is clicked but it is not working. But it works well on load. Why?

HTML:

<a href="" ng-click="loadGrid()">Load Grid</a>
<div ng-grid="ngOptions"></div>


$scope.ngData = [
{ Name: "Moroni", Age: 50, Position: 'PR Menager', Status: 'active', Date: '12.12.2014' },
{ Name: "Teancum", Age: 43, Position: 'CEO/CFO', Status: 'deactive', Date: '10.10.2014' },
{ Name: "Jacob", Age: 27, Position: 'UI Designer', Status: 'active', Date: '09.11.2013' },
{ Name: "Nephi", Age: 29, Position: 'Java programmer', Status: 'deactive', Date: '22.10.2014' }
];

$scope.loadGrid = funtion(){
 $scope.ngOptions = { data: 'ngData' };
};

Answer 1

You can initialize the data with an empty array, so that ng-grid is proparly initialized, and then change the data on-click like this:

$scope.myData = [];

$scope.ngOptions = { data: 'myData' };

$scope.loadGrid = function(){
  $scope.myData = [
    { Name: "Moroni", Age: 50, Position: 'PR Menager', Status: 'active', Date: '12.12.2014' },
    { Name: "Teancum", Age: 43, Position: 'CEO/CFO', Status: 'deactive', Date: '10.10.2014' },
    { Name: "Jacob", Age: 27, Position: 'UI Designer', Status: 'active', Date: '09.11.2013' },
    { Name: "Nephi", Age: 29, Position: 'Java programmer', Status: 'deactive', Date: '22.10.2014' }
  ];
};

Here's a working plunker

Answer 2

Please check this http://plnkr.co/edit/8H4NHFP59gWTxURwQKZw?p=preview

HTML :

 <a href="" ng-click="loadGrid()">Load Grid</a>
 <div ng-show="ngData.length">
     <div  ng-grid="ngOptions" ></div>
 </div>

Controller

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.ngData = [];
    $scope.ngOptions = {
        data: 'ngData'
    };
    $scope.loadGrid = function() {
        $scope.ngData = [
            { Name: "Moroni", Age: 50, Position: 'PR Menager', Status: 'active', Date: '12.12.2014' },
            { Name: "Teancum", Age: 43, Position: 'CEO/CFO', Status: 'deactive', Date: '10.10.2014' },
            { Name: "Jacob", Age: 27, Position: 'UI Designer', Status: 'active', Date: '09.11.2013' },
            { Name: "Nephi", Age: 29, Position: 'Java programmer', Status: 'deactive', Date: '22.10.2014' }
        ];
    }
});