I've run into a problem with ng-table and pagination. Basically I have two datasets and the user can choose which is rendered in the table.
With dataset one there are 2 pages and with dataset two there is only one page. The issue now is that if I navigate to page 2 and then change to dataset 2, I get a blank table with no paging options.
Plunker created below in which you can test this:
http://plnkr.co/edit/0D4ih7bPNf3Jz87Rymc7
My code is pretty much just a copy and paste from an ngtable example:
var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, $filter, ngTableParams) {
$scope.datasets = ["1","2"];
$scope.dataset = "1";
var data1 = [{name: "One", age: 50},
{name: "Two", age: 43},
{name: "Three", age: 27},
{name: "Four", age: 29},
{name: "Five", age: 34},
{name: "Six", age: 43},
{name: "Seven", age: 27},
{name: "Eight", age: 29},
{name: "Nine", age: 34},
{name: "Ten", age: 43},
{name: "Eleven", age: 27},
{name: "Twelve", age: 29},
{name: "Thirteen", age: 34},
{name: "Fourteen", age: 43},
{name: "Fifteen", age: 27},
{name: "Sixteen", age: 29}];
var data2 = [{name: "Jacob", age: 50},
{name: "Jacob", age: 43},
{name: "Jacob", age: 27}];
var getData = function() {
return $scope.dataset === "1" ? data1 : data2;
};
$scope.$watch("dataset", function () {
$scope.tableParams.reload();
});
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
name: 'asc' // initial sorting
}
}, {
total: function () { return getData().length; }, // length of data
getData: function($defer, params) {
var filteredData = getData();
var orderedData = params.sorting() ?
$filter('orderBy')(filteredData, params.orderBy()) :
filteredData;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
},
$scope: { $data: {} }
});
});
Any ideas welcomed!
Thanks,
Kevin.
http://plnkr.co/edit/Q3GLxP55bGgVB7I28kbY?p=preview
$scope.$watch("dataset", function () {
$scope.tableParams.$params.page=1;
$scope.tableParams.reload();
});
Related
I am using angular-ui-grid and am having problems changing the columns.
TypeError: self.options.columnDefs.forEach is not a function
Code is as follows:
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $timeout) {
$scope.columns1 = [{field: 'name', displayName: 'Name'}, {field:'age', displayName:'Age'}];
$scope.columns2 = [{field: 'new_name', displayName: 'New Name'}, {field:'new_age', displayName:'New Age'},{field:'pin', displayName:'Pin'}];
$scope.columnsSelected = $scope.columns1;
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = {
init: function (gridCtrl, gridScope) {
gridScope.$on('ngGridEventData', function () {
$timeout(function () {
angular.forEach(gridScope.columns, function (col) {
gridCtrl.resizeOnData(col);
});
});
});
},
paginationPageSize: 5,
data: {'name':'Apple','age': 5 },
columnDefs: 'columnsSelected'
};
$scope.update_columns = function($event) {
$scope.columnsSelected = $scope.columns2;
$scope.myData = [{new_name: "Moroni", new_age: 50, pin: 123},
{new_name: "Tiancum", new_age: 43, pin: 345},
{new_name: "Jacob", new_age: 27, pin: 567},
{new_name: "Nephi", new_age: 29, pin: 789},
{new_name: "Enos", new_age: 34, pin: 012}
];
}
});
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!!
If I have a huge table with ng-grid, and I enabled a checkbox to select all. Is there a way for me to combine this selectAll feature with the filtering box. I mean when I filter out the rows, I want to click the checkbox so that the rows filtered will be all selected; once I clean out filter, those selectedRows are still left so that I can add more rows into it with other filters.
I created a Plunker code template here.
copy code here as well:
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.mySelections = [];
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},];
$scope.filterOptions = {
filterText: ''
};
$scope.gridOptions = {
data: 'myData',
checkboxHeaderTemplate: '<input class="ngSelectionHeader" type="checkbox" ng-model="allSelected" ng-change="toggleSelectAll(allSelected)"/>',
showSelectionCheckbox: true,
selectWithCheckboxOnly: false,
selectedItems: $scope.mySelections,
multiSelect: true,
filterOptions: $scope.filterOptions
};
});
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' };
});
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.