AngularJS ngTable 按日期过滤

2023-11-22

我正在尝试在我的应用程序中设置 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>

UPDATE我刚刚注意到在表格的底部,您可以添加自己的过滤器。我最终弄清楚了如何将外部文件加载到自定义过滤器而不是内联模板:

<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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS ngTable 按日期过滤 的相关文章

  • AngularJs 表单发布数据在我的 spring 控制器中给出空值

    大家好 我正在尝试使用 Angular 发布表单 但我在 Spring 控制器中收到空值 此外 在我的控制台中 我看到 sysout 的空值 此外 即使我看到 bull 打印在我的控制台上 我也会收到错误警报 我的 JS 控制器 angul
  • $index 中的 AngularJS 数字

    举例来说 我有以下代码 伪 div index div 结果将是 1 2 3 4 5 6 我怎样才能改变上面的代码以便打印索引 001 002 003 004 005 006 以便索引打印为 3 位数字 您可以使用过滤器轻松完成此操作 首先
  • 大型 AngularJS 应用程序设计

    我需要关于设计具有多个复杂模块的 AngularJS 应用程序的建议 并根据用户角色在身份验证和授权后加载模块 有些用户可以访问一个简单的模块 有些用户可以访问仪表板 有些用户可以访问 2 个以上的模块 我们已经确定了许多可以在不同模块中重
  • ng-repeat 插入空锚标记

    我正在尝试使用角度创建一个菜单 菜单项可以有子项 需要另一个 ng repeat 来打印子导航项 当尝试在第二个 ng repeat 中插入锚标记时 我注意到一些奇怪的行为 小提琴链接 http jsfiddle net npU7t htt
  • Chrome 打包应用程序 - 在后台/事件页面中使用 AngularJS

    当我们创建 Chrome 应用程序时 我们将脚本放在背景属性中清单 json file 这将用作应用程序的背景 事件页面 我想要的是 我想使用 AngularJS后台脚本但我不知道怎么办 还有 这可能吗 我刚看到一些答案 https sta
  • AngularJs:当放置在 ng-view 标签内时,ng-include 不起作用

    我正在通过 ng view 内的角度路线加载 html 页面 我正在加载的页面包含一个 ng include 标签 指向 另一个 html 文件 我尝试了以下所有语法 div src div div div div src include
  • 如何使用 KendoUI 网格设置 CURD 以与 Kendo-Angular 和 Angular OData 工厂一起使用?

    在之前的项目中 我没有使用 Angular 我设置了一个Kendo DataSource使用 OData 端点 如下所示 var userDS new kendo data DataSource type odata transport r
  • WebAPI 和 Angular JS Excel 文件下载 - 文件损坏

    我正在 WebAPI 中生成 Excel 文件 我将其 存储 在内存流中 然后放入响应 如下所示 var result new HttpResponseMessage HttpStatusCode OK Content new Stream
  • 使用 ng-if 内容短暂呈现然后消失

    我的页面上有一些内容包含在 ng if 中 如下所示 div class text danger p strong Message displayed to User strong p div 然后在我的 Angular js 控制器中我有
  • 如何访问 Angularjs 模板中的常量

    如何将公共js文件中定义的常量访问到不同模块的模板中 如果我在 MainModule js 中定义了一个这样的常量 该常量包含在主 html 文件的开头 gt var myApp angular module AC gt myApp con
  • 从 mvc web api httpresponse 生成 csv 并通过 angularjs 接收以供下载

    我正在尝试从我的 Web api 生成一个 CSV 文件并通过 angularjs 接收该文件 我有一个如下所示的 API 控制器 HttpPost public HttpResponseMessage GenerateCSV FieldP
  • 在 Chrome 扩展中使用页面的 Angular JS

    我有一个 HTML 页面 其中有一些使用 Angular 配置的 DOM 现在我正在构建一个 chrome 扩展来修改文本框中的值 element value newValue不起作用 因为文本框是用 Angular 设计的 在阅读了一些资
  • AngularJS:理解 $rootScope.$on('$routeChangeSuccess

    我正在开发登录页面 成功后 它会重定向到主页 默认情况下 我显示登录页面以下代码 app run function rootScope location rootScope on routeChangeSuccess function lo
  • ngRepeat 中的指令时的绑定问题

    这就是它的样子 这是Plunker http plnkr co edit IPwDLT p preview parent scope ng repeat directive 在指令中 有一个属性与父作用域中的变量进行双向绑定 但这并没有像我
  • AngularJS:服务、提供商、工厂

    之间有什么区别Service Provider and Factory在 AngularJS 中 从我得到的 AngularJS 邮件列表一个惊人的线程 https groups google com forum msg angular 5
  • Firebase 未定义?

    我正在开发一个 Angular 项目并使用 Firebase 但出现错误ReferenceError Firebase is not defined 但我不明白为什么 这是我的index html
  • 该页面是通过 HTTPS 加载的,但请求了不安全的 XMLHttpRequest 端点

    我正在调用一个rest APIHttps已部署的应用程序 到Http休息 API 我使用 Angular Js 框架用 JavaScript 编写了逻辑 Web 服务调用失败并显示以下消息 https someurl 处的页面是通过 HTT
  • 动态分配 ng-model

    我正在尝试从对象数组生成一组复选框 我的目标是让复选框动态地将其 ng model 映射到将提交到数组中的新对象的属性 我的想法是这样的 li li
  • AngularJS 不再在 Firebug 控制台中显示特定错误

    我在我的应用程序中使用 AngularJS 和 Angular Material 库 问题是 每当控制器的任何功能发生任何错误时 它都不会显示特定的错误 而是每次都会显示相同的一般错误 通过查看这些错误 您无法确定出了什么问题 这是我的控制
  • 将 Angularjs 动态绑定到新创建的 html 元素

    我有一个带有多个选项卡的选项卡页面 一旦单击调用服务即可返回一些数据 其中一些数据返回 html 表单并且非常随机 我想收集输入的这些值并通过服务将数据发送回服务器 我遇到的问题是我无法从我动态创建的 html 中的输入元素获取数据 我创建

随机推荐

  • 网址中可以输入中文吗?

    URL中可以输入中文吗 经测试 URL中可以输入中文 并且会转换为punycode并发出请求 到达相关页面 但目前是否还有其他人会验证网站 URL 是否也允许使用中文字符 Punycode 的存在是为了能够在不受支持的软件中使用非拉丁脚本
  • 使用 jQuery Ajax 获取另一个页面的 div 内容

    我希望 page html 通过 ajax 请求 side html 的内容并提取其两个 div 的内容 但尽管我尝试了一切 但我无法找到解析响应的正确方法 这是 side html div ContentA div div Content
  • 如果不等待任务怎么办?

    这是我的代码 private static Stopwatch stopwatch static void PrintException Exception ex Console WriteLine stopwatch Elapsed Co
  • Facebook 广告 API 错误 - 未启用使用

    因此 我一直在尝试创建一个使用 Facebook Ads API 来获取广告费用和统计数据的应用程序 我已经创建了一个应用程序并将我的广告帐户 ID 添加到应用程序设置中 但仍然收到错误 error message 274 The ad a
  • 为什么使用 C++ Typedef?

    我对 typedef 的理解是给一个声明一个别名 这样的 int 声明现在将被称为 Integer 但为什么 为什么有人会使用 typedef 更有利的原因是什么 typedef int Integer Integer blamo 50 c
  • C++ 中的粗体输出

    我正在构建一本字典 当我打印 输出 单词定义时 我想以粗体打印单词本身 当我打印时 cout lt
  • 您可以通过 Flex 使用 Amazon S3 吗?

    由于缺少 clientaccesspolicy xml 通过 Flex 使用 Amazon S3 似乎存在问题 有什么解决办法吗 Edit 下面的两个答案都很棒并且有效 我都赞成 我不会为这个问题指定答案 因为它们都有效 您可以通过 Fle
  • 在 VB 中键入时,如何使智能感知上的 Enter 键的反应方式与 Visual Studio 中的 C# 中的反应方式相同?

    我使用的是 Visual Studio 2008 并且习惯了 C 当智能感知弹出时 我通过按 Enter 键选择我想要的内容 它不会跳到下一行 在 VB 中 当我在智能感知上按下回车键时 我会跳转到下一行 有谁知道这个智能感知选项的设置可能
  • 是否可以在 Emacs 中用文本替换边缘位图?

    我很想用简单 雅致的文本 甚至可能是一个很好的 unicode 字符 例如 u2026省略 这可能吗 不它不是 边缘 位图 实际上是位图 即覆盖在边缘上的 0 1 位向量 没有办法直接将任意 unicode 字符渲染到边缘上 您可以做的就是
  • IN 子句中的通配符

    SQL 我想在 IN 子句中使用通配符 但没有得到我期望的结果 我的查询是这样的 SELECT DISTINCT ID FROM INST WHERE TYPE in IP International 请帮助解决这个问题 解决方案应该是使用
  • Python for 循环中的“pass”和“continue”有区别吗?

    两个Python关键字之间有什么显着差异吗continue and pass就像例子中一样 for element in some list if not element pass and for element in some list
  • 可以改变JButton的形状吗?

    是否可以将 JButton 的形状从矩形更改为圆形 Sean Cogan 提供的链接就是您所需要的 如果您想要简短 请设置一个图像 圆形或任何您希望按钮看起来相似的形状 使用setIcon然后在 JButton button1 上设置这些值
  • 获取类转换异常,其中两个类完全相同

    我正在做一个 JBoss SEAM 项目 当我查看表单时 我收到此错误 java lang ClassCastException it cogitoweb csi entity csiorelav CsiTipoLav cannot be
  • Unix 域:connect():没有这样的文件或目录

    如标题所述 我的连接 调用具有相应地址的 unix 域类型套接字会导致错误ENOENT 没有这样的文件或目录 两个套接字已正确初始化 并且相应地创建并绑定了套接字文件 服务器和客户端套接字在不同的进程中运行 尽管客户端进程是 fork 和
  • 使用标记列表构建抽象语法树

    我想从令牌列表构建 AST 我正在制作一种脚本语言 并且已经完成了词法分析部分 但我不知道如何创建 AST 所以问题是 我该如何采取这样的事情 WORD int WORD x SYMBOL NUMBER 5 SYMBOL 并将其转换为抽象语
  • GWT - 在单元树中添加和删除节点

    这里我有一个完整且非常简单的示例来动态添加 删除 单元树的节点 我的例子效果不太好 似乎有 是刷新问题 只有关闭 展开节点才会显示正确的 结果 我在这个论坛上也没有找到适合这个问题的答案 也许有人可以尝试我的例子并告诉我问题出在哪里 任何其
  • 在一个 JFrame 中使用两个 JPanel

    我正在尝试创建一个程序 允许用户单击按钮将某些内容放入JPanel并允许他们移动该物品 我已经找到了一个很好的布局来允许移动组件 请参阅this关联 但是 我只是好奇创建这样的布局的最佳方法 我的希望是有这样的东西 我怎样才能做到这一点 我
  • Python 读取输入的最快方法

    我想读取一个包含整数列表列表的巨大文本文件 现在我正在执行以下操作 G with open test txt r as f for line in f G append list map int line split 然而 大约需要 17
  • 实时更新 Google Compute Engine 实例类型

    我想知道您是否可以将一个实例的类型更改为另一种实例 例如 n1 标准 1 到 n1 标准 2 我在文档中没有看到任何内容 但可能我错过了一些东西 如果这是不可能的 我如何处理这个问题 还有另一种方法可以进行此更改 您可以停止机器 对其进行编
  • AngularJS ngTable 按日期过滤

    我正在尝试在我的应用程序中设置 ngTable 但它不支持按日期过滤 而且我不知道如何实现它 我最初将数据中的日期作为时间戳 这使我能够由于时间戳的增量性质而对列进行正确排序 但显然我无法输入 9 月并过滤数据 Example row da