如何使用 Angular JS 按月和年正确过滤日期

2024-02-10

在我的数据库中,日期排列如下(日/月/年)

Date
-----------
10/12/2014
22/10/2014
14/12/2015

我正在使用 angularjs 模板并尝试对日期字段进行排序(使用月份和年份进行排序)如下:

Date
-----------
14/12/2015
10/12/2014
22/10/2014

但它正在排序上升 as

Date
-----------
10/12/2014
14/12/2015
22/10/2014

下降 as

Date
----------
22/10/2014
14/12/2015
10/12/2014

这是我的代码

<div class="row">
        <div class="col-md-12" ng-show="filteredItems > 0">
            <table class="table table-striped table-bordered">
            <thead>
            <th>Date&nbsp;<a ng-click="sort_by('time_stamp');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Reference number&nbsp;<a ng-click="sort_by('tran_id');"><i class="glyphicon glyphicon-sort"></i></a></th>

            </thead>
            <tbody>
<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
                    <td>{{data.time_stamp}}</td>
                    <td>{{data.tran_id}}</td>                
</tr>
</tbody>
</table>
</div>

控制器.js

var app = angular.module('myApp', ['ui.bootstrap']);

app.filter('startFrom', function() {
    return function(input, start) {
        if(input) {
            start = +start; //parse to int
            return input.slice(start);
        }
        return [];
    }
});
app.controller('customersCrtl', function ($scope, $http, $timeout) {
    $http.get('ajax/getCustomers.php').success(function(data){
        $scope.list = data;
        $scope.currentPage = 1; //current page
        $scope.entryLimit = 5; //max no of items to display in a page
        $scope.filteredItems = $scope.list.length; //Initially for no filter  
        $scope.totalItems = $scope.list.length;
    });
    $scope.setPage = function(pageNo) {
        $scope.currentPage = pageNo;
    };
    $scope.filter = function() {
        $timeout(function() { 
            $scope.filteredItems = $scope.filtered.length;
        }, 10);
    };
    $scope.sort_by = function(predicate) {
        $scope.predicate = predicate;
        $scope.reverse = !$scope.reverse;
    };
});

获取客户.php:

$query="select tran_id,tran_type,sender,receiver,amount,fee,DATE_FORMAT(time_stamp, '%d/%m/%Y') as time_stamp,status from transaction  where sender ='[email protected] /cdn-cgi/l/email-protection' or receiver ='[email protected] /cdn-cgi/l/email-protection' order by time_stamp DESC";

//$query="select * from transaction";

$result = $mysqli->query($query) or die($mysqli->error.__LINE__);

$arr = array();
if($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $arr[] = $row;  
    }
}
# JSON-encode the response
$json_response = json_encode($arr);

// # Return the response
echo $json_response;

如何获得我想要的排序


就你而言,日期项目像字符串一样排序,而不是像日期一样 https://stackoverflow.com/questions/19876116/angular-orderby-date/19876132#19876132.

您必须将它们设置为 Date 对象才能正常排序。

EDIT

如果我正确理解您的代码,您将在此处获取控制器中的数据:

 $http.get('ajax/getCustomers.php').success(function(data){
        $scope.list = data;

在问题诊断之后,尝试在下一行中进行类似的操作:

$scope.list.time_stamp = new Date(data.time_stamp); // convert string date to Date object

我没有测试代码,但我希望它能起作用,因为我们知道问题是什么。

工作中的笨蛋

我对日期进行了功能排序plunker http://plnkr.co/edit/8FrCxfFsaZO9r1knIlVW?p=preview基于这个假设,它就像一个魅力!

在控制器中我关联属性dateDate类似物体date:new Date('9/1/2013')并下了一个订单AngularJS 排序文档 https://docs.angularjs.org/api/ng/filter/orderBy.

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

如何使用 Angular JS 按月和年正确过滤日期 的相关文章

  • 使用 JavaScript 禁用第三方 cookie

    我正在努力根据所有在欧盟运营的公司的数据保护规则实施新的 Cookie 政策合规性 根据该规则 用户在使用任何网站时必须能够拒绝 接受除必需的 Cookie 之外的所有内容 在我客户的网站中 我可以看到正在存储以下第三方 cookie ga
  • 带有淘汰赛js的隐形recaptcha

    我正在完成隐形验证码 但我在实现它时遇到问题 谷歌开发人员页面中的代码显示它应该是这样的
  • 可以在初始 DOM 解析期间/之前修改 DOM 吗?

    是否可以在初始 DOM 解析期间或之前修改 DOM 或者我是否必须等到 DOM 被解析和构建之后才能与其交互 更具体地说 是否有可能阻止 DOM 中的脚本元素使用用户脚本 内容脚本或 Chrome 或 Firefox 中的类似脚本运行 在解
  • Snap.svg - 停止在可悬停元素的子元素上重新触发悬停事件

    对于一个项目 我使用的 SVG 形状由背景多边形和背景多边形上方的一些文本 我已将其转换为路径 组成 我正在使用 Snap svg 为我的形状设置动画 当我将鼠标悬停在多边形上时 形状应该缩放到特定尺寸 包括其中的所有内容 鼠标移开时 形状
  • 有没有办法使用 Rspec/Capybara/Selenium 将 javascript console.errors 打印到终端?

    当我运行 rspec 时 是否可以让 capybara selenium 向 rspec 报告任何 javascript console errors 和其他异常 我有一大堆测试失败 但当我手动测试它时 我的应用程序正在运行 如果不知道仅在
  • 如何将函数附加到弹出窗口关闭事件(Twitter Bootstrap)

    我做了一些搜索 但我只能认为我可以将事件附加到导致其关闭的按钮 https stackoverflow com questions 13205103 attach event handler to button in twitter boo
  • 设置 cookie 时中断 JavaScript 执行

    当设置 cookie 时 是否可以始终中断浏览器开发人员工具中的 javascript 执行 无需显式设置 JS 断点 document cookie 在 html head 块的开头添加此代码片段效果很好
  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • Javascript split 不是一个函数

    嘿朋友们 我正在使用 javascript sdk 通过 jQuery facebook 多朋友选择器在用户朋友墙上发布信息 但是我收到此错误friendId split 不是函数 这是我的代码 function recommendToFr
  • window.location 和 location.href 之间的区别

    我对之间的区别感到困惑window location and location href 两者似乎都以相同的方式行事 有什么不同 window location是一个对象 它保存有关当前文档位置的所有信息 主机 href 端口 协议等 lo
  • DataTables row.add 到特定索引

    我正在替换这样的行项目 var targetRow entity row dataTable targetRow closest table dataTable DataTable dataTable row targetRow remov
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • 如何在 angular-ui 中动态禁用 ui-sortable 指令

    我正在使用 Angular ui 使用 ui sortable 指令进行排序 是否可以根据范围状态动态启用 禁用可排序功能 因此 我需要一个按钮来更改范围属性的状态 并且根据此属性可排序是否应该工作 角度指令支持观察可排序选项何时发生变化
  • Firebase 函数 onWrite 未被调用

    我正在尝试使用 Firebase 函数实现一个触发器 该触发器会复制数据库中的一些数据 我想观看所有添加的内容votes user vote 结构为 我尝试的代码是 const functions require firebase func
  • 从数据库检查数据的异步解决方案各种循环子句

    我想要做的是异步检查数据库并从中获取结果 在我的应用程序中我试图实现Asynchronously将此步骤解决为 从数据库中检查手机号码JsonArray循环子句的种类 Create JsonArray从结果 打印创建的数组 我学到了足够多的
  • zsh 问题:在提示符附近显示最新的文件和目录以及建议的最新文件或目录

    在 MacOS Big Sur 11 3 上 这是我的 zshrc 我想获取最新的修改或创建靠近提示的文件和目录 从最新到最旧的排序 这是我当前的配置 zshrc ZSH completion autoload Uz compinit co
  • 在 Shopify 商店中嵌入 Vue 组件

    在产品页面中 我尝试显示自定义 Vue 组件 为简洁起见 该组件根据给定的产品 ID 显示 Firebase 数据库中的一些信息 我最初尝试将其制作为 Shopify 应用程序 以便我可以访问他们的 API 我实现了 OAuth 并且可以检
  • 使用其构造函数初始化 OrderedDict 以便保留初始数据的顺序的正确方法?

    初始化有序字典 OD 以使其保留初始数据的顺序的正确方法是什么 from collections import OrderedDict Obviously wrong because regular dict loses order d O
  • 从 FileReader 设置背景图像样式

    我正在寻找一种解决方案 允许我从文件上传输入中获取文件并通过设置 document body style backgroundImage 来预览它 以下代码用于在 Image 元素中显示预览 function setImage id tar

随机推荐

  • Promise { } - 尝试等待 .map

    我在用 map绘制新对象并将旧价格添加到地图中 我将 Async Await 与我的数据图一起使用 这是我的代码的样子 let datasets await changes map async data gt let products le
  • 通过 TCP 连接到 DBus 服务

    我是进程间通信方面的新手 我需要你的帮助和清晰的解释 我有 2 个应用程序 其中一个是服务 一个是客户端 我使用 QT C 来编写它们 当他们在一台本地 PC 上工作时 一切都很好 但我需要把它们分开 所以 我在 IP 192 30 82
  • Href 和 Url.Content 有什么区别?

    Both Href and Url Content可用于解析虚拟路径 该路径相对于文件或文件夹的虚拟根路径 Href 和 Url Content 之间有什么区别 url content 不仅仅创建一个普通的 href 它还考虑应用程序的子
  • 在 Atom 中使用 Hydrogen 设置 Python 虚拟环境

    我正在从 VS Code 切换到 Atom 并且正在尝试为我的 python 项目设置一个虚拟环境 在 VS Code 中这很容易做到 我运行以下脚本 当我运行脚本时 它会自动开始使用新的环境 包含所有必需的包 python3 m venv
  • Android - 检测与特定 wifi ssid 断开连接的正确方法?

    我见过几个 BroadcastReciever 示例来检测 wifi 断开连接 但它们似乎都无法正常工作 例如 每次断开连接触发两次 并且没有提到检查 ssid 这是否可能 所以为了澄清一下 我想检测与特定 ssid 的断开连接 设备上实际
  • 更改格子图中条带上的文本

    如何更改格子图中显示的文本 例子 假设我有一个由 3 列组成的数据框测试 x 1 1 2 3 4 5 6 7 8 9 10 y 1 A A A A A B B B B B a 1 1 9952066 1 7292978 0 8789127
  • 使用标题转动用户位置注释

    我正在尝试更改我的应用程序中的用户注释 以便它显示通常的蓝点 但有一个三角形来显示用户面向的方向 我宁愿旋转用户注释而不是整个地图 这就是 MKUserTrackingModeFollowWithHeading 所做的 我有一个基本版本可以
  • Reflect.getOwnMetadata 不是最新 Aurelia 的 karma 函数

    更新到最新版本的 Aurelia 3 月更新 beta 1 1 4 后 每次运行 karma 测试时都会收到以下错误 Error Reflect getOwnMetadata is not a function Error loading
  • 如何解决 System.Text.Json.JsonException:在实体框架中检测到可能的对象循环? [复制]

    这个问题在这里已经有答案了 我有一个包含表 数据的数据库 因此我使用了数据库优先方法 使用以下命令来构建模型 dotnet ef dbcontext scaffold Server Database MyDb Trusted Connect
  • (简单)HTML属性是否允许在赋值之间有空格

    我正在将一些属性解析为字符串 因此我需要知道如何在 HTML XHTML 元素属性中使用空格 div width 150px div 这也正确吗 div width 150px div 如果有人知道使用 JavaScript 迭代属性及其值
  • gradle 构建中不需要的 tar、zip、jar 分发

    我正在做 gradle build 其中包括许多项目 当我跑步时gradle build命令它生成不需要的包 如 tar zip 那么我应该怎么做才能排除这些任务 我正在使用战争插件来生成战争 apply plugin war 我还使用以下
  • Android 调试技巧

    我的程序经常崩溃 我在 LogCat 中看不到任何内容 也无法在其他地方看到任何有用的信息来找出问题所在 我唯一看到的是某种例外 这是不可接受的 并且使得 Android 编程几乎不可能 我确信一定有一些额外的帮助来调试 但经过几周的搜索
  • 导入路径不能以“.ts”结尾 - NodeJS 和 Visual Code

    我在尝试构建一个简单的 NodeJS 应用程序时遇到错误 即使 Visual Code 提示错误 我的代码仍然运行 当我从 import 语句中删除 ts 扩展名时 出现找不到文件的错误 我正在使用 webpack 但这些文件来自服务器 这
  • >>'运算符[关闭]' aria-label='sql server中的无符号右移'>>>'运算符[关闭]'> sql server中的无符号右移'>>>'运算符[关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 如何在sql server中编写无符号右移运算符 表达式就像value gt gt gt 0 这是例如 5381 gt
  • C++:使用“.”表达式和函数调用上的运算符

    我想知道使用成员运算符是否是一个好的做法 像这样 someVector segment getFirst segment getSecond normalize normalCCW 只是这样做是为了展示我想知道的两件不同的事情 即如果使用
  • 如何在CSS中引用带有空格的长类名?

    我正在尝试设计一些 Drupal 输出的样式 特别是 我试图引用一个具有超长名称 包括空格 的类 我不清楚这个的语法 请原谅我 我是 CSS 新手 看
  • winform 中的字段验证

    winforms 中验证字段有快捷方式吗 例如 在保存记录之前需要填写特定的文本框 我总是做的是在保存之前首先以编程方式检查所有必填字段 例子 protected bool CheckFields bool isOk false if te
  • 在 Android 中处理 unix 信号

    我正在编写一个 Java 应用程序 它使用命名管道与 C 应用程序进行通信 当 C 应用程序终止时 Java 会收到 SIGPIPE Java 应用程序也会终止 在 C C 上 我知道如何捕获该信号并忽略它 是否可以在 Android Ja
  • 如何在WPF中根据字体大小缩放表单?

    如何在 WPF 中缩放带有字体的表单 即 WPF 相当于什么 this Font SystemFonts IconTitleFont 在 WinForms 中 如果您是一名优秀的开发人员 您就会尊重用户的字体首选项 一个 WinForm 的
  • 如何使用 Angular JS 按月和年正确过滤日期

    在我的数据库中 日期排列如下 日 月 年 Date 10 12 2014 22 10 2014 14 12 2015 我正在使用 angularjs 模板并尝试对日期字段进行排序 使用月份和年份进行排序 如下 Date 14 12 2015