This GitHub issue says no, but can ng-grid be used when following Angular's "controller as" syntax?
Update:
Here is the basic example as seen on the ng-grid site:
http://plnkr.co/edit/lBgeAf?p=preview
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = { data: 'myData' };
});
Here is my attempt at "controler as" syntax using the the basic example:
http://plnkr.co/edit/fI00U1?p=preview
(function() {
angular.module('myApp', ['ngGrid']);
angular.module('myApp').controller('MyCtrl', MyCtrl);
function MyCtrl() {
var vm = this;
vm.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
vm.gridOptions = { data: "myData" };
}
})();
Actually, the controller as syntax is just a shorthand for assign the controller instance into its own $scope, so the MyCtrl as mc would be equivalent to something like this:
function MyCtrl($scope) {
$scope['mc'] = this;
}
Therefore, you could just change the gridOptions to this:
vm.gridOptions = { data: "mc.myData" };
Example plunker: http://plnkr.co/edit/S4wyfB?p=preview
BTW, to prevent a confusion, you should use the same variable name to refer to the controller instance, I mean vm and mc.
Although a bit late, I found a workaround to this issue which requires an assignment to the data array for both $scope.myData and vm.myData, like so:
$scope.myData = vm.myData = [{name: "Moroni", age: 50}, ...];
As the array is a composite data type, this means that the property on scope stores a reference to the object. Thus, you can still use the controller as syntax in your controller to manipulate the data and be sure that the $scope.myData will be updated as well.
Here is a fork of your plunker which shows that it works.
Note: In ngGrid v.3.0 (which is not released yet), controller as syntax works normally and doesn't require any hacks.
you have to use vm as shown below
vm.gridOptions = { data: "vm.myData" };
Related
Please find the following Plunker. I am not able to show ng grid on button click. Is there anything wrong in the code?
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $http) {
$scope.changeEntity = function () {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = { data: 'myData' };
}
});
First of all, you have to define your gridOptions in your controller onLoad itself, not on a function call. But you can load data on a function call,
in your case its button click.
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $http) {
$scope.gridOptions = { data: 'myData' };
$scope.changeEntity = function () {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
}
});
Note: in your Plunker js file name needs to be changed!!
All the example that I see of the ng-grid are those that populate the grid on the controller side. For instance shown below:
$scope.myData = [
{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Arbaaz",age: 11},
{name: "Safiya",age: 6},
{name: "Zane", age: 4}
];
$scope.gridOptions = { data: 'myData' };
And then on the HTML side you use it as
<div class="gridStyle" ng-grid="gridOptions"></div>
How do I populate the grid on the HTML side. For instance inside the controller I make a call to a service which returns a list of employees. Then on the HTML side I am using a regular table
<table><thead></thead><tbody><tr ng-repeat = "employee in employees"</tbody></table>
How would you populate the employees data you receive from a service call on the grid on the HTML side instead or pre-populating on the controller side.
ngGrid watching for data change, so you can populate $scope.myData value after service will return data asynchroniously.
app.controller('MyCtrl', function($scope, $timeout) {
// emulate async service call
$timeout(function() {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
}, 2000);
$scope.gridOptions = {
data: 'myData'
};
});
please see here : http://plnkr.co/edit/bVkGJpZdKBEOA0Uz16mh?p=preview
js:
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.service('dataService', function() {
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
function getData() {
return data
}
return {
getData: getData
}
})
app.controller('MyCtrl', function($scope, dataService) {
//get data from service
$scope.employees = dataService.getData();
$scope.gridOptions = { data: 'employees' };
});
I am updating the list of selectedItems but the selections (checkboxes) on the UI are not getting updated for the same.
index.html
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<h3>Rows selected</h3>
<pre>{{selectedRows}}</pre>
<button ng-click="selectAdam()">Select Adam</button>
</body>
main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Sam", age: 50},
{name: "Peter", age: 43},
{name: "Jacob", age: 27},
{name: "Scott", age: 29},
{name: "Adam", age: 34}];
$scope.selectedRows = [];
$scope.gridOptions = { data: 'myData',
showSelectionCheckbox: true,
selectedItems: $scope.selectedRows
};
$scope.selectAdam = function() {
$scope.selectedRows.push({name: "Adam", age:34});
}
});
Plunkr for the code
Am I missing something here?
Apparently this is how you do it (based on the example at ngGrid:
$scope.selectAdam = function() {
angular.forEach($scope.myData, function(data, index){
if(data.name == 'Adam' && data.age == 34){
$scope.gridOptions.selectItem(index, true);
}
});
}
Working Plunker: http://plnkr.co/edit/K7b2ElQ1Z5uNAijFk7x4?p=info][1
All of the examples that I can find of ng-grid Mater/Detail, such as the official demo at http://angular-ui.github.io/ng-grid/ do show Master / Detail, but they don't show it with two ng-grids.
How can I do that? I don't even know how to start. It looks like the grid is bound to $scope.gridOptions and $scope is bound to controller, so I don't see how to have two ng-grids in one controller.
Does that mean I need two controllers (connected by a service)?
The HTML
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="fooGridOptions"></div>
<div class="gridStyle" ng-grid="barGridOptions"></div>
</body>
the JS:
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.foo = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.bar = [{name: "Moroni", age: 50},
{name: "Foo", age: 43},
{name: "Bar", age: 27},
{name: "FooBar", age: 29},
{name: "JohnJohn", age: 34}];
$scope.fooGridOptions = { data: 'foo' };
$scope.barGridOptions = { data: 'bar' };
});
ng-grid looks in whichever object is passed with the directive(ng-grid="myOptionsObject"). In this case we only have the 'data' property set upon the object but other options are available.
I'm trying to put ng-grid on the modal window (ui.bootstrap.modal). When grid placed on the main page, everything is ok.
But when I place it into
<script type="text/ng-template"...></script>
I'm getting the following:
"TypeError: Cannot set property 'gridDim' of undefined".
Is there some workaround to place ng-grid on a modal window?
My plunk is here: http://plnkr.co/edit/ctLF6j3WeqSvT3vEM40f?p=preview
http://plnkr.co/edit/SkqwlmfSM6jpgS9rR5Ad
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.gridOptions = {
data: 'myData',
columnDefs: [{field: 'name', displayName: 'Name'}, {field:'age', displayName:'Age'}, {field: 'remove', displayName:'', cellTemplate: removeTemplate}]
};
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
The modal has it's own scope not inheriting from the scope where you defined the gridOptions, this error occurs if it can't find the gridOptions to set the gridDim on it.