Just getting started with angular and exploring ag-grid. I have a service in one file and a controller in another, where I am able to see the grid column headers but struggling to bind the data from my service to the grid. Can someone please point out what I might be missing?
I attempted to use:
gridOptions.datasource = myDataSource; -- as shown on the ag-grid site, but couldn't get it to work.
rmdsServices.js
(function () {
'use strict';
var rmdsServices = angular.module('rmdsServices', ['ngResource']);
rmdsServices.factory('rmds', ['$resource',
function ($resource) {
return $resource('/api/rmd/', {}, {
query: { method: 'GET', params: {}, isArray: true }
});
}]);
})();
rmdsController.js
(function () {
angular
.module('rmdsApp', ['agGrid', 'rmdsServices'])
.controller('rmdsController', rmdsController)
rmdsController.$inject = ['$scope', 'rmds'];
function rmdsController($scope, rmds) {
$scope._rmd = rmds.query();
var columnDefs = [
{ headerName: "RMDID", field: "RMDID", width: 150, editable: true },
//other columns defs
];
var rowData = $scope._rmd;
$scope.gridOptions = {
columnDefs: columnDefs,
enableFilter: true,
angularCompileFilters: true,
enableSorting: true,
rowSelection: 'single',
enableColResize: true,
rowData : rowData,
angularCompileRows: true
};
};
})();
After adding the following code, I can see the objects returning back but they are still not binding to the grid. When I put in an alert, I can see the objects coming back but it doesn't bind to the grid. Apologies for any confusion, I'm quite new to angular.
Update:
var rowdata = $scope._rmd;
rmds.query().$promise.then(function (res) {
$scope._rmd = res;
});
$scope.gridOptions = {
columnDefs: columnDefs,
//enableFilter: true,
//angularCompileFilters: true,
//enableSorting: true,
//rowSelection: 'single',
//enableColResize: true,
rowData: $scope._rmd
// angularCompileRows: true
};