AngularJS按日期ngTable过滤 [英] AngularJS ngTable filtering by Date
问题描述
我试图建立ngTable在我的应用程序，但它不支持日期过滤，我无法弄清楚如何实现它。我最初在我的数据作为一个时间戳，这让我列排序正确由于时间戳的增量性质的日期，但显然我不能键入九月和过滤数据。
//从数据数组实例行数据
{
指数：0，
ID：54587313ac91d561b246bf90
用户：用户3
日期：1390054873445，
状态：在建工程
}
我试图将其设置为一个字符串，但是当你过滤或排序也不会产生一个递增/递减顺序，而不是它有它在数据组织顺序。
//输出的日期不递增/递减，如果使用日期字符串
2014年9月8日
2014年9月27日
2014年9月23日
2014年9月26日
我一直在寻找通过ngTable，发现我可能会改变表格的标题，所以我抓住一个副本，编辑和添加某种自定义过滤器或指引？也许我应该使用不同的日期字符串？我创建使用时间戳数据的应用程序，这被过滤以显示给用户和排序的 Plunker ，但我希望能够通过键入月，日，和/或，即每年进行过滤。 2014年，月等。
//例日期栏设置
＆LT; TD数据标题='日期'
排序='约会'
过滤器={'日期'：'文字'}
NG-绑定=（doc.date |日期：mediumDate）＆GT;＆LT; / TD＆GT;
更新
我只注意到在ngTable.js，你可以在自己的过滤器下降的底部。我终于想通了如何加载外部文件到自定义过滤器，而不是内联ngTemplates：
＆LT; TD数据标题='日期'
排序='约会'
过滤器={'日期'：'日期'}//添加过滤器（日期）的名义，向ASSOC数组的值
NG-绑定=（loan.date |日期：mediumDate）＆GT;＆LT; / TD＆GT;
或将文件放置在一个更有用的地方在你的应用程序：
＆LT; TD数据标题='日期'
排序='约会'
过滤器={'日期'：'日期'，templateURL：/www/app/ng-table/filters/date.html'}
NG-绑定=（loan.date |日期：mediumDate）＆GT;＆LT; / TD＆GT;
不过不知道该怎么办，但会继续努力得到这个工作，我做了一个 Plunker 什么，我至今没有什么帮助。如果这是一个指令在date.html？
您可以通过定义这样的自定义过滤器做到这一点：
angular.module（tableApp，['ngTable']）\r
\r
.filter（'customUserDateFilter'，函数（$过滤器）{\r
返回功能（值，dateString）{\r
变种过滤= [];\r
\r
如果（typeof运算值='不确定'和;！＆安培;！typeof运算dateString =未定义）{\r
angular.forEach（值，函数（值）{\r
如果（$过滤器（'日期'）（value.Date）.indexOf（dateString）＆GT; = 0）{\r
filtered.push（值）;\r
}\r
}）;\r
}\r
\r
返回过滤;\r
}\r
}）\r
\r
.controller（MyCtrl功能（$范围，$过滤器，ngTableParams）{\r
VAR数据= [\r
{名称：'约翰'，日期，新的日期（2014年1月1日'）}，\r
{名称：'李四'，日期，新的日期（2014年1月2日'）}，\r
{名称：'简，日期，新的日期（2014年2月1日'）}\r
];\r
\r
$ scope.tableParams =新ngTableParams（{\r
页面：1，//显示第一页\r
数：10，//每页计\r
}，{\r
总：data.length，//数据的长度\r
的getData：函数（$延迟，则params）{\r
//使用内置的角度过滤器\r
VAR过滤器= params.filter（）;\r
VAR tempDateFilter;\r
\r
VAR orderedData = params.sorting（）？\r
$滤波器（'ORDERBY'）（数据，params.orderBy（））：\r
数据;\r
\r
如果（过滤器）{\r
如果（filters.Date）{\r
orderedData = $滤波器（'customUserDateFilter'）（orderedData，filters.Date）;\r
tempDateFilter = filters.Date;\r
删除filters.Date;\r
}\r
orderedData = $过滤器（'过滤器'）（orderedData，过滤器）;\r
filters.Date = tempDateFilter;\r
}\r
\r
$ scope.users = orderedData.slice（（params.page（） - 1）* params.count（），params.page（）* params.count（））;\r
\r
params.total（orderedData.length）; //设置为总重计算分页\r
$ defer.resolve（$ scope.users）;\r
}\r
}）;\r
}） \r
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs /angularjs/1.2.23/angular.min.js\"></script>\r
＆LT;脚本的src =// cdn.jsdelivr.net/angular.ngtable/0.3.3/ng-table.js\"></script>\r
＆LT;链接rel =stylesheet属性HREF =// cdn.jsdelivr.net/angular.ngtable/0.3.3/ng-table.css/＆GT;\r
\r
＆LT; DIV NG-应用=tableAppNG控制器=MyCtrl＆GT;\r
＆LT;表NG表=tableParams显示过滤器=真正的类=表＆GT;\r
＆LT; TR NG重复=用户$ DATA＆GT;\r
＆LT; TD数据标题=名称过滤器={'名'：'文字'}排序='名'＆GT;\r
{{用户名}}\r
＆LT; / TD＆GT;\r
＆LT; TD数据标题=日期过滤器={'日期'：'文字'}排序='日期'＆GT;\r
{{user.Date |日期}}\r
＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆LT; /表＆gt;\r
＆LT; / DIV＆GT; \r
I'm trying to set up ngTable in my application, but it doesn't support filtering by Date, and I can't figure out how to implement it. I initially had the date in my data as a timestamp, which allowed me to sort the column properly due to the incremental nature of a timestamp, but obviously I can't type September and filter the data.
// Example row data from data array
{
"index": 0,
"id": "54587313ac91d561b246bf90",
"user": "user3",
"date": 1390054873445,
"status": "in-progress"
}
I tried setting it to a string, but when you filter or sort it doesn't produce a asc/desc order instead it comes in order it is organized in the data.
// Date output not in asc/desc if use date string
September 8, 2014
September 27, 2014
September 23, 2014
September 26, 2014
I've been looking through ngTable and found I could alter the header of the table, so I grabbed a copy to edit and add some sort of custom filter or directive? Maybe I should be using a different date string? I created a Plunker of the app using the timestamp data, which is filtered for display to the user and sortable, but I'd like to be able to filter by typing the month, day, and/or year, ie. 2014, September, etc.
// Example date column setup
<td data-title="'Date'"
sortable="'date'"
filter="{ 'date': 'text' }"
ng-bind="(doc.date | date:mediumDate)"></td>
UPDATE I just noticed at the bottom of ngTable.js that you can drop in your own filters. I eventually figured out how to load an external file to a custom filter instead of inlining ngTemplates:
<td data-title="'Date'"
sortable="'date'"
filter="{ 'date': 'date' }" // add name of filter (date), to the value of assoc array
ng-bind="(loan.date | date:mediumDate)"></td>
or to place the file in a more useful place in your application:
<td data-title="'Date'"
sortable="'date'"
filter="{ 'date': 'date', templateURL: '/www/app/ng-table/filters/date.html' }"
ng-bind="(loan.date | date:mediumDate)"></td>
Still not sure what to do, but will keep trying to get this working, I made a Plunker of what I have so far if that helps. Should this be a directive in date.html?
You could do this by defining a custom filter like this:
angular.module("tableApp", ['ngTable'])
.filter('customUserDateFilter', function($filter) {
return function(values, dateString) {
var filtered = [];
if(typeof values != 'undefined' && typeof dateString != 'undefined') {
angular.forEach(values, function(value) {
if($filter('date')(value.Date).indexOf(dateString) >= 0) {
filtered.push(value);
}
});
}
return filtered;
}
})
.controller("MyCtrl", function($scope, $filter, ngTableParams) {
var data = [
{ Name: 'John', Date: new Date('1/1/2014') },
{ Name: 'Doe', Date: new Date('1/2/2014') },
{ Name: 'Jane', Date: new Date('2/1/2014') }
];
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
}, {
total: data.length, // length of data
getData: function($defer, params) {
// use build-in angular filter
var filters = params.filter();
var tempDateFilter;
var orderedData = params.sorting() ?
$filter('orderBy')(data, params.orderBy()) :
data;
if(filters) {
if(filters.Date) {
orderedData = $filter('customUserDateFilter')(orderedData, filters.Date);
tempDateFilter = filters.Date;
delete filters.Date;
}
orderedData = $filter('filter')(orderedData, filters);
filters.Date = tempDateFilter;
}
$scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length); // set total for recalc pagination
$defer.resolve($scope.users);
}
});
})
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.ngtable/0.3.3/ng-table.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/angular.ngtable/0.3.3/ng-table.css" />
<div ng-app="tableApp" ng-controller="MyCtrl">
<table ng-table="tableParams" show-filter="true" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'" filter="{ 'Name': 'text' }" sortable="'Name'">
{{user.Name}}
</td>
<td data-title="'Date'" filter="{ 'Date': 'text' }" sortable="'Date'">
{{user.Date | date}}
</td>
</tr>
</table>
</div>
这篇关于AngularJS按日期ngTable过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
