I need ti display with ng-table in one column datetime:
var renderGrid = function(tableData) {
$scope.tableData = tableData;
if($scope.tableParams) {
$scope.tableParams.reload();
} else {
$scope.tableParams = new ngTableParams({
page: 1,
count: 10,
sorting: {
date: 'asc'
},
filter: {
date: ''
}
}, {
getData: function($defer, params) {
var sliceStart = (params.page() - 1) * params.count();
var sliceEnd = params.page() * params.count();
var orderedData = params.filter() ? $filter('filter')($scope.tableData, params.filter()) : $scope.tableData;
var filteredData = params.sorting() ? $filter('orderBy')(orderedData, params.orderBy()) : $scope.tableData;
$scope.totalCount = filteredData.length;
params.total(filteredData.length);
$defer.resolve(filteredData.slice(sliceStart, sliceEnd));
}
});
}
};
<table ng-table="tableParams" template-pagination="tcTableNav" class="tcTable">
<tr ng-repeat="item in $data">
<td style="width:34%" sortable="'date'" data-title="'Date'"><div>{{item.date}}</div></td>
<td style="width:33%" sortable="'autor'" data-title="'Autor'"><div>{{item.autor}}</div></td>
<td style="width:33%" sortable="'article'" data-title="'Article'"><div>{{item.article}}</div></td>
</tr>
</table>
How form datetime correctly that sorting + filtering work correctly?
i solved that by adding a textfield with the formatted date to my tableData
Did you try using instead ngTasty table http://zizzamia.com/ng-tasty/directive/table ,
and if you want you can just upload an example of the structure you want sort and I will write you the complete solution :)
Related
I am aware that it may be Duplicate Question, but I tried that too but it didnt work it. So, I am posting my Question now. My Question is Apply the Date range filter using Angular js only one column.
Here is MY code:
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<table>
<tr>
<td>Start Date</td>
<td><input type="text" name="S_Date" ng-model="startDate"/></td>
<td>End Date</td>
<td><input type="text" name="E_Date" ng-model="endDate"/>
</tr>
</table>
</div>
<table>
<tr>
<th>Date</th>.
<th>Stock</th>
</tr>
<tr ng-repeat="subject in records |myfilter:startDate:endDate">
<td>{{ subject.name * 1000|date:'dd-MM-yyyy'}}<td>
<td>{{ subject.marks }}</td>
</tr>
</table>
Angular JS:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.records = [
{
"name" : "2016-08-01",
"marks" : 250
},{
"name" : "2016-08-02",
"marks" : 150
},{
"name" : "2016-08-03",
"marks" : 100
},{
"name" : "2016-08-04",
"marks" : 150
},{
"name" : "2016-05-01",
"marks" : 750
},{
"name" : "2016-05-02",
"marks" : 1500
},{
"name" : "2016-03-03",
"marks" : 500
},{
"name" : "2016-04-04",
"marks" : 650
}
]
function parseDate(input) {
var parts = input.split('-');
return new Date(parts[2], parts[1]-1, parts[0]);
}
app.filter("myfilter", function() {
return function(items, from1, to) {
var df = parseDate(from1);
var dt = parseDate(to);
alert(df)
alert(dt)
var result = [];
for (var i=0; i<items.length; i++){
var tf = new Date(items[i].startDate * 1000),
tt = new Date(items[i].endDate * 1000);
if (tf > df && tt < dt) {
result.push(items[i]);
}
}
return result;
};
});
});
</script>
Please advice me Where I am going wrong.Please suggest me.Thanks in advance.
I recommend you to use moment.js library: http://momentjs.com/
Here is working plunkr with your range filter: https://plnkr.co/edit/dfpsBI0uom5ZAEnDF3wM?p=info
<div ng-controller="MainCtrl">
<table>
<tr>
<td>Start Date</td>
<td>
<input type="text" name="S_Date" ng-model="startDate" />
</td>
<td>End Date</td>
<td>
<input type="text" name="E_Date" ng-model="endDate" />
</td>
</tr>
</table>
<table>
<tr>
<th>Date</th>.
<th>Stock</th>
</tr>
<tr ng-repeat="subject in records | myfilter: startDate: endDate">
<td>{{ subject.name | date:'dd-MM-yyyy'}}</td>
<td>{{ subject.marks }}</td>
</tr>
</table>
</div>
app.controller('MainCtrl', function($scope) {
$scope.startDate = "2016-08-01";
$scope.endDate = "2016-08-03";
$scope.records = [{
"name": "2016-08-01",
"marks": 250
}, {
"name": "2016-08-02",
"marks": 150
}, {
"name": "2016-08-03",
"marks": 100
}, {
"name": "2016-08-04",
"marks": 150
}, {
"name": "2016-05-01",
"marks": 750
}, {
"name": "2016-05-02",
"marks": 1500
}, {
"name": "2016-03-03",
"marks": 500
}, {
"name": "2016-04-04",
"marks": 650
}];
});
app.filter("myfilter", function($filter) {
return function(items, from, to) {
return $filter('filter')(items, "name", function(v) {
var date = moment(v);
return date >= moment(from) && date <= moment(to);
});
};
});
$scope.Customfilterobj`enter code here` = { status: "Complete",StartDate: "2017-02-01T08:00:00",EndDate: "2018-02-01T08:00:00 " };
<tr ng-repeat="dt in data | filter: {Status: Customfilterobj.status} | dateRange:Customfilterobj.StartDate:Customfilterobj.EndDate">
Here we have use two filters as below:
filter: {Status: Customfilterobj.status} work as compare "complete" value with Status of data collection.
dateRange:Customfilterobj.StartScheuleDate:Customfilterobj.EndScheuleDate" : dateRange is custom filter for compare Expiration_date between StartDate and EndDate.
app.filter('dateRange', function () {
return function (data, greaterThan, lowerThan) {
if (greaterThan != null && lowerThan != null && greaterThan != undefined && lowerThan != undefined) {
data = data.filter(function (item) {
if (item.Expiration_date != null) {
var exDate = new Date(item.Expiration_date);
return exDate >= new Date(greaterThan) && exDate <= new Date(lowerThan);
}
});
}
return data;
};
});
Adding off of Roman Koliada's plunker. His process has a small issue in the usage of the angular $filter. I have the updated here:
https://plnkr.co/edit/l4t4Fln4HhmZupbmOFki?p=preview
New filter:
app.filter("myfilter", function($filter) {
return function(items, from, to, dateField) {
startDate = moment(from);
endDate = moment(to);
return $filter('filter')(items, function(elem) {
var date = moment(elem[dateField]);
return date >= startDate && date <= endDate;
});
};
});
The issue was that the function input into $filter function was the third param, and loops over every attribute of every object in the list. Console logging his plunker calls moment() on every single attribute of every object. By instead inputting a function as the second param, as the expression instead of the comparator - we can call the comparison only on the date field.
Angular doc: https://docs.angularjs.org/api/ng/filter/filter
How to set a pre-selected option for ngTable select filter? My code is below and it is similar to the example from the official ngTable page. Now the selected value is an empty option and I want that the first option with a value is pre-selected by default (the one that is showing all the data in a table):
$scope.customersTable = new ngTableParams({
page: 1, // show first page
count: 10,
sorting: {
importDate: 'desc'
}
}, {
total: $scope.customers.length, // length of data
getData: function ($defer, params) {
var orderedData = params.sorting() ?
$filter('orderBy')($scope.customers, params.orderBy()) :
$scope.customers;
orderedData = params.filter ?
$filter('filter')(orderedData, params.filter()) :
orderedData;
$scope.custs = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length);
$defer.resolve($scope.custs);
}
});
var inArray = Array.prototype.indexOf ?
function (val, arr) {
return arr.indexOf(val)
} :
function (val, arr) {
var i = arr.length;
while (i--) {
if (arr[i] === val) return i;
}
return -1
};
$scope.importDates = function () {
var def = $q.defer(),
arr = [],
importDates = [];
$scope.$watch('customers', function () {
angular.forEach($scope.customers, function (item) {
if (inArray(item.importDate, arr) === -1) {
arr.push(item.importDate);
importDates.push({
'id': item.importDate,
'title': item.importDate
});
}
});
});
def2.resolve(importDates);
return def2;
};
And the HTML:
<table ng-table="customersTable" show-filter="true" class="table table-hover">
<tbody>
<tr data-ng-repeat="customer in $data">
<td data-title="'First Name'" sortable="'firstName'">
{{customer.firstName}}
</td>
<td data-title="'Import Date'" sortable="'importDate'" filter="{ 'importDate': 'select' }" filter-data="importDates()">
{{customer.importDate | date}}
</td>
</tr>
</tbody>
</table>
add filter property to your ngTableParams
$scope.customersTable = new ngTableParams({
page: 1, // show first page
count: 10,
sorting: {
importDate: 'desc'
},
filter:{importDate:'yourDefaultValue'},
.....})
I am very new to Angularjs. I have created an table using ng-table, The problem is the table header sorting is not working.
Sample code attached here.
HTML : (Sample ng-table)
<table ng-table="tableParams" show-filter="true" class="table">
<thead>
<tr>Row 1</tr>
<tr>Row 2</tr>
<tr>Row 3</tr>
<tr>Row 4</tr>
<tr>Row 5</tr>
<tr>Row 6</tr>
</thead>
<tbody>
<tr ng-repeat="user in $data">
<td sortable="'value1'">{{user.value1}}</td>
<td sortable="'value2'">{{user.value2}}</td>
<td sortable="'value3'">{{user.value3}}</td>
<td sortable="'value4'">{{user.value4}}</td>
<td sortable="'value5'">{{user.value5}}</td>
<td sortable="'value6'">{{user.value6}}</td>
</tr>
</tbody>
</table>
Controller :
$http.get('/portal/api/documents/'+Id).success(function(data){
var data = data.result;
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
name: 'asc' // initial sorting
}
}, {
total: data.length, // length of data
getData: function($defer, params) {
// Pagination
$defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
// use build-in angular filter
var orderedData = params.sorting ?
$filter('orderBy')(data, params.orderBy()) :
data;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
});
I think your problem comes from your sorting configuration :
sorting: {
name: 'asc' // initial sorting
}
You seem not to have a name parameter in one of your table column (value1, value2, ... unless you didn't show us your real code)
If you want to sort your first column, you should try this :
sorting: {
value1: 'asc' // initial sorting
}
I am trying to add data from a typeahead selection to rows in a ngTable. I was using a regular bootstrap table for this but I needed to be able to edit the data after the row was added. INgTable has a table that can do this so I wanted to switch. I am not familiar with ngTable so any help would be great.
plunkr
//Add New POD Row
$scope.data = [];
$scope.addRow = function () {
$scope.data.push({
'JobItemName': $scope.masterItem.MLItemCode,
'JobItemDescription': $scope.masterItem.JobItemDescription,
});
$scope.masterItem.JobItemName = '';
$scope.masterItem.JobItemDescription = '';
};
//Remove POD Row
$scope.removeRow = function (JobItemName) {
var index = -1;
var comArr = eval($scope.data);
for (var i = 0; i < comArr.length; i++) {
if (comArr[i].JobItemName === JobItemName) {
index = i;
break;
}
}
if (index === -1) {
alert("Something gone wrong");
}
$scope.data.splice(index, 1);
};
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: $scope.data.length, // length of data
getData: function($defer, params) {
$defer.resolve($scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
Why use the ngTable directive and not something like this :
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in table" ng-click="editMyRow(row)">
<td ng-bind="row.column1"></td>
<td ng-bind="row.column2"></td>
</tr>
</tbody>
</table>
In this case, everytime you edit those values, your table will change in real time.
The controller would be something like :
angular.module('test').controller('blah', $scope){
$scope.table = {};
$scope.table.row = [];
$scope.table.row.add({
column1: '',
column2: ''
});
}
I'm using the ng-table directive which is quite nice but doesn't seem to have a proper documentation.
I can't find a way to sort by value which is not the column value. For example, consider this is the data I'm getting from the server:
this.data = [ {'id': 1, 'gender': 'female', height: 170},
{'id': 2, 'gender': 'male', height: 180}
];
here is the html:
<table dir='rtl' ng-table="service.tableParams">
<tr ng-repeat="row in service.data">
<td data-title="'gender'" sortable="'gender'">{{row.gender}}</td>
<td data-title="'name'">{{ service.nameOf[row.id] }}</td>
<td data-title="'height'" sortable="'height'">{{row.height}}</td>
</tr>
</table>
in the js file I have a map from id to a name:
nameOf = { 1: 'omer', 2: 'noam' };
My problem is with sorting by the name column. I want to sort by the nameOf[row.id] and not by the id.
Any idea how to do that?
Thanks,
Omer.
This should work ;)
You have have to define yourself the manner of sort when he clicks on the sortable button.
getData: function($defer, params) {
var orderedData;
var sortByName = params.sorting().name
if(sortByName) {
orderedData = data.sort(function(a, b){
var nameA=service.nameOf[a.id].toLowerCase(), nameB=service.nameOf[b.id].toLowerCase()
if (nameA < nameB)
return -1
if (nameA > nameB)
return 1
return 0
});
if (sortByName == 'desc') {
orderedData = orderedData.reverse();
}
} else {
orderedData = params.sorting() ?
$filter('orderBy')(data, params.orderBy()) :
data;
}
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
Example : Plnkr