We Keep Coding

Using select filter in ngTable

I was trying this ngTable example of filtering columns using select values.
HTML code (table part)
<table ng-table="tableParams" class="table" show-filter="true">
<tbody>
<tr ng-repeat="row in $data">
<td data-title="'Name'" filter="{name: 'select'}" filter-data="names" sortable="'name'">{{ row.name }}</td>
<td data-title="'Age'" filter="{age: 'text'}" sortable="'age'">{{ row.age }}</td>
</tr>
</tbody>
</table>
Javascript code
var app = angular.module('ngTableApp', ['ngTable'])
.controller('selectFilterController', function($scope, $filter, $q, 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.names = ['Moroni', 'Enos', 'Nephi'];
$scope.tableParams = new NgTableParams({page: 1, count: 10}, {dataset: data});
})
When I run this code plunker, the select values for column 'Name' are blank.
The example says
The select filter will fetch its data by calling the fetchData function defined for the column.
But, there is no fetchData function called in the code in that example. I am confused as what is the issue here?

From example I figured out that the format used by ng-table for filter-data attribute in HTML(for select values) is array of objects in the following form.
$scope.names = [{id: "", title: ""}, {id: 'Moroni', title: 'Moroni'}, {id: 'Enos', title: 'Enos'}, {id: 'Nephi', title: 'Nephi'}];
Updated plunker.

Should be written like:
$scope.names = [{"id": "", "title": ""}, {"id": "Moroni", "title": "Moroni"}];

Fail to show data using ngTable but no error

I am trying to implement the example shown in the official ng-table homepage here as is.
So I copied and pasted to my project and it fails to show any data like below:
My HTML code is a partial html, loaded with ngRouter:
<section class="content">
<h2>TABLE</h2>
<div ng-controller="TableCtrl">
<p><strong>page:</strong>{{tableParams.page()}}</p>
<p><strong>count per page:</strong>{{tabelParams.count()}}</p>
<table ng-table="tableParams" class="table">
<tr tr-repeat="user in $data">
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
</tr>
</table>
</div>
</section>
My JS file is:
var app = angular.module('pean', ['ngRoute', 'ngTable'])
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider){
$routeProvider.
when('/', {
templateUrl: 'partials/home'
}).
when('/test', {
templateUrl: 'partials/test',
controller:'TableCtrl'
}).
Url: 'partials/read'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
app.controller('TableCtrl', 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({
page:1,
count:10
},{
total:data.length,
getData:function($defer, params){
$defer.resolve(data.slice((params.page() -1) * params.count(), params.page() * params.count()));
}
});
});
There isn't any error message on my chrome consol. So I don't see any reason why this is not working.

you are having tr-repeat="user in $data"instead of
ng-repeat="user in $data"
in your code.
try to add your data as
$scope.data = [...]
instead of
var data = [...]
in your controller and refer it as
ng-repeat="user in data"
in your HTML
Hope this helps!

No data found in my ngTableParams in Angular

I use ng-table component
In my bower.json:
{
"name": "angular-seed",
"description": "A starter project for AngularJS",
"version": "0.0.0",
"homepage": "https://github.com/angular/angular-seed",
"license": "MIT",
"private": true,
"dependencies": {
...
"ng-table": "~0.3.3"
}
}
In my index.html:
<!doctype html>
<html lang="fr" ng-app="test" ng-controller="TitleCtrl">
<head>
...
<script src="bower_components/ng-table/ng-table.js"></script>
<link rel="stylesheet" href="bower_components/ng-table/ng-table.css"/>
...
</head>
<body>
<ng-include src="'menu/menu.html'"></ng-include>
<div ng-view style="padding-left: 20px;padding-right: 20px;"></div>
</body>
</html>
In my table.html:
<form class="form-horizontal narrow" role="form">
<div ng-controller="PropertiesCtrl">
<p><strong>Page:</strong> {{tableParams.page()}}</p>
<p><strong>Count per page:</strong> {{tableParams.count()}}</p>
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
</tr>
</table>
</div>
</form>
In my properties.js:
var propertiesModule = angular.module('test.properties', ['ngTable']);
propertiesModule.controller('PropertiesCtrl', ['$scope', '$routeParams', 'PropertiesService', 'ApplicationService', 'PlatformService', 'Page', '$filter', 'ngTableParams', function ($scope, $routeParams, PropertiesService, ApplicationService, PlatformService, Page, $filter, ngTableParams) {
...
$scope.on_edit_unit = function () {
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({
page: 1, // show first page
count: 10 // count per page
}, {
total: data.length, // length of data
getData: function($defer, params) {
$defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
console.log( data);
console.log( $scope.tableParams);
});
};
...
When I log in the console $scope.tableParams:
ngTableParams {data: Array[0], parameters: function, settings:
function, page: function, total: function…}
Why there is no data in my ngTableParams?
UPDATE init a PLUNKER:
PLUNKER

Explanation of an example of NG -Table

Someone can explain this example
Plunker NG-Table
In the HTML, there is -->
<tbody ng-repeat="group in $groups">
But in the js there is no why ?
$groups

The ngTable module defines the $scope.$groups when the groupBy ngTableParameter is specified (you can see it in the github source code here ).
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
groupBy: 'role', // << ----- grouping parameter
total: data.length,
getData: function($defer, params) {
var orderedData = params.sorting() ?
$filter('orderBy')(data, $scope.tableParams.orderBy()) :
data;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
This is the $groups created on the $scope by ngTable, for the data in the plunker example.
$scope.$groups = [
{
value: 'Administrator',
data: [
{name: "Moroni", age: 50, role: 'Administrator'},
{name: "Tiancum", age: 43, role: 'Administrator'},
{name: "Jacob", age: 27, role: 'Administrator'}
]
},
{
value: 'Moderator',
data: [
{name: "Nephi", age: 29, role: 'Moderator'},
{name: "Nephi", age: 29, role: 'Moderator'},
{name: "Tiancum", age: 43, role: 'Moderator'},
{name: "Enos", age: 34, role: 'Moderator'}
]
},
{
value: 'User',
data: [
{name: "Enos", age: 34, role: 'User'},
{name: "Tiancum", age: 43, role: 'User'},
{name: "Jacob", age: 27, role: 'User'},
{name: "Enos", age: 34, role: 'User'},
{name: "Jacob", age: 27, role: 'User'},
{name: "Nephi", age: 29, role: 'User'},
{name: "Tiancum", age: 43, role: 'User'},
{name: "Jacob", age: 27, role: 'User'},
{name: "Nephi", age: 29, role: 'User'},
{name: "Enos", age: 34, role: 'User'}
]
}
]

choosing only specific columns with ng-grid

I am trying to lean ng-grid and am having trouble with selecting only specific columns from my data to display. Below is my code:
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Moroni", age: 50, sex: "Male"},
{name: "Tiancum", age: 43, sex: "Female"},
{name: "Jacob", age: 27, sex: "Male"},
{name: "Nephi", age: 29, sex: "Male"},
{name: "Enos", age: 34, sex: "Female"}];
$scope.gridOptions = { data: myData,
columnDefs: [{ field: 'name', displayName: 'Name', width: 90},
{ field: 'sex', displayName: 'Sex', width: 90}
]};
});
Basically, I'd like to be able to display only columns "name" and "sex" in myData. Any help here? I've looked for answers to this question on SO and elsewhere online but haven't found anything. Apologies if this is a dupe.
Here's the Plunker.

You have to put myData inside quotes
$scope.gridOptions = { data: 'myData', // <<<<<
columnDefs:
[{ field: 'name', displayName: 'Name', width: 90 },
{ field: 'sex', displayName: 'Sex', width: 90 }
]};