Loading ng grid with ng-click
I'm trying to load ng-grid
when a button is clicked but it doesn't work. But it works well on boot. 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' };
};
+3
source to share
2 answers
You can initialize the data with an empty array so that ng-grid is initialized, then change the data 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' }
];
};
This is where the plunker works
+2
source to share
Please check 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' }
];
}
});
0
source to share