- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试在我的应用程序中设置 ngTable,但它不支持按日期过滤,而且我不知道如何实现它。我最初将数据中的日期作为时间戳,这使我能够由于时间戳的增量性质而对列进行正确排序,但显然我无法输入 9 月并过滤数据。
// Example row data from data array
{
"index": 0,
"id": "54587313ac91d561b246bf90",
"user": "user3",
"date": 1390054873445,
"status": "in-progress"
}
我尝试将其设置为字符串,但是当您过滤或排序时,它不会产生升序/降序顺序,而是按照数据中组织的顺序排列。
// Date output not in asc/desc if use date string
September 8, 2014
September 27, 2014
September 23, 2014
September 26, 2014
我一直在浏览 ngTable 并发现我可以更改表的标题,所以我捕获了一个副本来编辑并添加某种自定义过滤器或指令?也许我应该使用不同的日期字符串?我创建了一个Plunker使用时间戳数据的应用程序,该数据经过过滤以显示给用户并可排序,但我希望能够通过输入月份、日期和/或年份进行过滤,即。 2014年9月等
// Example date column setup
<td data-title="'Date'"
sortable="'date'"
filter="{ 'date': 'text' }"
ng-bind="(doc.date | date:mediumDate)"></td>
更新我刚刚注意到在 ngTable.js 的底部,您可以放入自己的过滤器。我最终弄清楚了如何将外部文件加载到自定义过滤器而不是内联 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>
或者将文件放置在应用程序中更有用的位置:
<td data-title="'Date'"
sortable="'date'"
filter="{ 'date': 'date', templateURL: '/www/app/ng-table/filters/date.html' }"
ng-bind="(loan.date | date:mediumDate)"></td>
仍然不知道该怎么做,但会继续努力让它工作,我做了一个 Plunker到目前为止我所掌握的内容(如果有帮助的话)。这应该是 date.html 中的指令吗?
最佳答案
您可以通过定义如下所示的自定义过滤器来实现此目的:
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 按日期过滤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26729542/
我正在尝试在我的应用程序中使用 ngTable,并且执行以下步骤: 1) 导入 ngTable css 文件 2)导入ngTable.js文件 3)将“ngTable”添加到我的 angular.mo
我需要显示一个 5 列表数据,其中包含 3 列标题,类似于下面的屏幕截图(请忽略带有黄色星号的表正文中的第一列)。 帮我解决下面给出的几个问题。 当我在 thead 中提供显式 header 值以将
我尝试编写一个小而简单的 ngTable 演示,但遇到了问题: 当我尝试将数组放入 ngTable 时,浏览器仅显示表的标题行,而不显示数据。结果如截图所示: 所有代码都在 plunker 中 这是“
我正在尝试在我的应用程序中设置 ngTable,但它不支持按日期过滤,而且我不知道如何实现它。我最初将数据中的日期作为时间戳,这使我能够由于时间戳的增量性质而对列进行正确排序,但显然我无法输入 9 月
我正在尝试仅从具有过滤数据的 ng-table 中选择行。使用以下代码过滤表格行,但即使未显示的行也会被选中: Controller : let sampleData = [{id: 1, name:
我有大量数据,并尝试在 AngularJS 的表格中显示这些数据(带有过滤和排序)。为此,我尝试使用 ng-Table,但是当数据太多(> 1000 行)时,它在远程服务器上开始变慢,当数据太多(>
我在 ng-table 中有一个发票列表,并且希望能够过滤嵌套属性。 json 看起来像这样; [ { id: 1, date: "20/03/2014", no:
我在 ngTable 中使用 groupBy,但现在我需要在表中进一步分组: $scope.tableParams = new ngTableParams({ count: 100,
几周来我一直在顺利地使用 ngTable,现在我面临着一个同时做两件事的奇怪问题: 通过服务器端分页从 API 获取数据。 根据用户输入重新加载表格。 虽然这两件事单独完成时很容易实现,但当我试图同时
我正在尝试使用 ngTable 在 html 上显示数据。 在 html 中,我将所有列都设置为“可排序”。 {{re
我有一个使用 ngTable 的小型 AngularJS 应用程序。该应用程序有多个表格,但其中大部分不需要分页。我正在处理一张需要分页的表格。 当表格呈现时,我知道表格中有相当多的条目(超过 100
我在开始使用 ngtables 时遇到了一些困难。现在,分页是正确的,但我无法进行排序和过滤。定义的初始排序顺序都不起作用有什么建议吗?谢谢 脚本 var app = angular.module('
我的屏幕上有两个表格: (1) {{user.userId}}
我正在尝试使用 ngTableParams 更新我的 ngTable,但只显示第一列。 js代码: var dataset = [ {name: "Hello50", bunny:"Bunny1"
我正在使用 ngTable 并异步加载表,但其中一列正在使用选择过滤器,并且当调用它时,表数据尚未解析。最初我使用本地 JSON 对象测试 ngTable 并且这有效,但现在我不确定如何填充选择。是否
我得到了以下 html。我剪了几列 {{pilot.license}}
在我的小型 AngularJS 应用程序中,我使用 ngTable 库渲染了几个表格。只有一个人可以使用分页。其他人将永远适合不到一页。每个呈现的 ngTable 似乎都在表格下方添加了“10 25
当我单击顶部复选框时,如何选择网格上的所有复选框。此时它仅单击当前页面复选框。如果您可以在 Plunk 上模拟您的解决方案,非常感谢。提前致谢。 这是链接:Table with checkboxes
我已经使用 angularjs 和 ngTable 创建了一个具有文件管理器功能的应用程序,该应用程序在过滤方面也工作正常,但根据我的要求,过滤文本字段应该只接受 10 个字符 谁能告诉我如何将该文本
在此plunk我有一个 ngTable,其中包含动态创建的列。这些列是可排序和可过滤的,但是当单击标题时,排序不起作用,过滤器也不起作用。有什么想法吗? Javascript var app = an
我是一名优秀的程序员,十分优秀!