I have created an application using ng-Table, the application is working fine which had generated table using ng-Table. The problem which i am facing is that the table sorting is not working. My code is as given below
HTML:
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'" sortable="'name'">
{{user.name}}
</td>
<td data-title="'Age'" sortable="'age'">
{{user.age}}
</td>
</tr>
and my js code:
var app = angular.module('myApp', ['ngTable']).
controller('mycontroller', function($scope, NgTableParams)
{
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.tableParams = new NgTableParams({
sorting: {
name: 'asc'
}
}, {
getData: function($defer, params) {
$defer.resolve(data);
}
});
});
IS THERE ANYTHING WRONG?
This will work, you need to add $filter for your data.
var app = angular.module('myApp', ['ngTable']).
controller('mycontroller', function($scope, NgTableParams,$filter)
{
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.tableParams = new NgTableParams({
sorting: {
name: 'asc'
}
}, {
getData: function($defer, params) {
data = $filter('orderBy')(data, params.orderBy());
$defer.resolve(data);
//$defer.resolve(data);
}
});
});
Try this
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data | orderBy:'-age'"">
<td data-title="'Name'">
{{user.name}}
</td>
<td data-title="'Age'">
{{user.age}}
</td>
</tr>
OR
<table class="table">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr ng-repeat="user in $data | orderBy:'-age'">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
Have you tried Smart table. It is an Angularjs module to easily display data in a table with a set of built in features such filtering,sorting, etc.:
http://lorenzofox3.github.io/smart-table-website/#section-intro
It's simple to use and looks great!
try this. in ngTable document using this way for binding data to table.
$scope.tableParams = new NgTableParams({
sorting: {
name: 'asc'
}
}, {
dataset: data
});
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!!
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();
});
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.