AngularJS orderby 整数字段无法正常工作

2023-11-23

我刚刚拿了最简单的演示http://docs.angularjs.org/api/ng.filter:orderBy只需将年龄的值更改为不同的位数即可。它停止按预期工作。它的顺序类似于“字符串”而不是“整数”值。我应该如何更改它,以便它按年龄排序,如整数值?

Plunker 演示就在这里http://plnkr.co/edit/pzgiIYrki7jUZdVaTMt9?p=preview

代码是:

function Ctrl($scope) {
  $scope.friends =
      [{name:'John', phone:'555-1212', age:'2352345'},
       {name:'Mary', phone:'555-9876', age:'4235243'},
       {name:'Mike', phone:'555-4321', age:'241'},
       {name:'Adam', phone:'555-5678', age:'34325'},
       {name:'Julie', phone:'555-8765', age:'1234'}]
  $scope.predicate = '-age';
}


<!doctype html>
<html ng-app="App">
  <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
  <body>

<div ng-controller="Ctrl">
  <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
  <hr/>
  [ <a href="" ng-click="predicate=''">unsorted</a> ]
  <table class="friend">
    <tr>
      <th><a href="" ng-click="predicate = 'name'; reverse=false">Name</a>
          (<a href="" ng-click="predicate = '-name'; reverse=false">^</a>)</th>
      <th><a href="" ng-click="predicate = 'phone'; reverse=!reverse">Phone Number</a></th>
      <th><a href="" ng-click="predicate = 'age'; reverse=!reverse">Age</a></th>
    </tr>
    <tr ng-repeat="friend in friends | orderBy:predicate:reverse">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
    </tr>
  </table>
</div>


  </body>
</html>

你必须将年龄转换为数字类型才能使orderBy正常工作。

添加到您的控制器以将字符串年龄排序为浮点数:

   angular.forEach($scope.friends, function (friend) {
    friend.age = parseFloat(friend.age);
   });

它应该有效,

See PLunker

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

AngularJS orderby 整数字段无法正常工作 的相关文章

  • GWT - onClick 未触发

    我在表单上有一个非常奇怪的行为 有许多具有内联验证的文本字段 如果内容无效 则会在字段下方显示错误消息 验证在模糊时触发 页面底部有一个 下一步 按钮 单击后 将执行验证 如果一切正常 则提交表单 现在 如果当我单击按钮时强制空白字段具有焦
  • Three.js - 如何使用姿势估计数据为 3D 模型制作动画

    我正在尝试使用姿势估计坐标来对 Three js 中的装配模型进行动画处理 我正在使用的姿势估计技术提供了视频源中人物的实时 x y z 坐标 我正在尝试使用这些坐标相应地移动 3D 模型 我使用下面的代码 其中一些代码是我在相关问题的答案
  • 为什么使用 MongoDB 的 $push 向数组添加新对象时会添加带有 ObjectID 的 _id ?

    我正在使用 Node js 和 Mongoose 玩家和锦标赛变量是之前获取的 Mongoose 对象 我想将一个新的tournamentSession对象 不是Mongoose对象 添加到玩家对象的tournamentSessions字段
  • 首选的客户端路由解决方案? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • Javascript - 删除粘贴上的空格

    我有一个最大长度为 10 的输入文本字段 该字段用于澳大利亚电话号码 10 位数字 电话号码通常分为以下语法 12 12345678 如果有人复制上面的内容并将其粘贴到我的输入字段中 显然会留下最后一位数字并保留空格 有没有办法在粘贴到输入
  • LitElement 不更新列表中的复选框

    我有一个简单的清单 每个项目都有一个删除按钮 当我选中第一个项目然后删除它时 列表会更新 删除该项目 但会选中下一个项目的复选框 下一项的属性是正确的 这是我的代码 import LitElement html from lit eleme
  • 如何使用 JavaScript 访问 runat="server" ASP 元素?

    似乎每个人都在这样做 在代码帖子等中 但我不知道如何 每当我尝试使用 JavaScript 操作 asp 元素时 我都会得到一个 element is null or document is undefined 等等错误 JavaScrip
  • Jquery onclick 更改图像 - 3 个产品支架

    EDIT 我想添加另一个按钮 因此总共有 3 个按钮 而不是 2 个 我怎样才能做到这一点 我尝试添加产品支架 3 但如果我先单击按钮 1 然后单击按钮 3 则两个按钮都具有相同的背景图像 预览 http gyazo com 6698586
  • 如何限制注册用户尝试投票两次[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我对 php 编码和网站设计非常陌生 我正在尝试开发一个在线投票系统 只允许注册用户投票 已完成所有操作并且工作正常 但我需要的帮助是
  • 如何禁用 Firebase 电话身份验证 reCAPTCHA? (网络/反应)

    我正在构建一个 React Firebase 应用程序并使用 Firebase 的 PhoneAuthProvider 进行身份验证 在开发过程中 需要进行大量的登录和注销来测试身份验证流程 私有路由 登录重定向等 每次我需要登录时 都会向
  • React 和 ES6 继承

    Note 这篇文章是在 React 不支持 ES6 v12 时发布的 我有一个 ES6 课程 class BaseClass getInitialState return message Hello render return div di
  • 与 webpack 捆绑后,无法读取枚举的未定义属性

    我有一个 React 库 我想使用 Webpack 来构建它 该库是使用 Typescript 编写的 似乎一切正常 但由于某种原因枚举却不起作用 当我将库安装到我的 React 应用程序中时 我发现Cannot read properti
  • 没有 jQuery 的纯 CSS 工具提示[重复]

    这个问题在这里已经有答案了 可能的重复 如何使用纯 CSS 创建 工具提示尾部 https stackoverflow com questions 5623072 how can i create a tooltip tail using
  • 如何确定特定时间是否在javascript中给定时间范围之间

    我想检查两个时间 var open time 和 var close time 之间的 var check val var open time 23 30 var close time 06 30 var check val 02 30 i
  • 如何使我的网站兼容移动设备和平板电脑? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想让我现有的网站在手机 平板电脑上查看时自动调整 甚至在您在桌面上调整屏幕时自动调整 如果失败的话 如果太难 你有什么建议 我基本上
  • Highcharts 异步服务器加载多个系列

    我正在尝试按照其示例使用 Highcharts 的延迟加载 http www highcharts com stock demo lazy loading http www highcharts com stock demo lazy lo
  • 矩形描边上的单击事件

    我想仅在矩形的笔划上添加单击事件 并避免在矩形内部单击 下面是代码 var stage new Kinetic Stage container container width 578 height 200 var layer new Kin
  • Angular 4 - “等待操作”的正确方法是什么?

    我遇到了一个简单的问题 有一个很奇怪的解决方案setTimeout 0 看看这个简单的代码 Component selector my app template div div
  • 按 Chartjs 条形图的键对对象进行分组

    我正在尝试使用 Chart js 创建条形图 我在尝试根据每个用户的状态创建分组条形图时陷入困境 这是数据 statusId 0 firstName Joe status appealed count 1 statusId 0 firstN
  • 如何将react-native与php一起使用并获取返回数据始终为空

    我的回报始终为空 我似乎无法让它发挥作用 我如何将react native与php一起使用并获取json 任何人都可以帮忙吗 PHP myArray array myArray lat POST lat myArray lng POST l

随机推荐

  • ZF2 中的会话

    您能告诉我如何在 ZF2 中正确使用会话吗 到目前为止我有这个代码 session gt remember me seconds gt 2419200 use cookies gt true cookie httponly gt true
  • 在列表中创建重复的项目

    我有以下代码来复制列表的成员X times 虽然它有效 但感觉不是特别干净 实时代码示例 http rextester com UIVZVX7918 public static List
  • 如何通过方法参数加锁?

    string Get string key lock sync DoSomething 如果 DoSomething 仅依赖于密钥 我想要密钥依赖锁 我认为它可能是带有同步对象的字典 有没有完整的解决方案 就像真实的例子一样在 ASP NE
  • Instagram API 匹配代码未找到或已被使用

    我在使用 Instagram API 的实时服务器上看到此错误 Error true message Matching code was not found or was already used 我在这里阅读了一些清除缓存的建议 但这并不
  • Laravel:POST 方法返回 MethodNotAllowedHttpException

    我有一个POST路线在我的api php文件 它是这样的 Route group namespace gt api function Route post parent signup ParentController signUp 我正在尝
  • ejb 3.1 中的计时器服务 - 调度调用超时问题

    我使用 Singleton Schedule 和 Timeout 注释创建了简单的示例 以尝试它们是否能解决我的问题 场景是这样的 EJB 每 5 秒调用一次 检查 函数 如果满足某些条件 它将创建单个操作计时器 该计时器将以异步方式调用一
  • JavaFX:将控制台输出重定向到在 SceneBuilder 中创建的 TextArea

    EDIT 4 我创建了一个简单的示例 应该可以让您了解现在发生的情况 现在发生的情况是 每当我单击按钮将 HELLO WORLD 打印到 TextArea 时 程序就会挂起并使用 100 的 CPU Eclipse 控制台面板中也没有输出
  • 检查 COM 接口是否还存在?

    在 COM 中 如何验证指向 COM 对象的指针在另一端仍然具有有效的对象 我遇到一个问题 以下代码尝试检查是否m pServer指针仍然存在 但是当暴露该接口的应用程序被终止时 这段代码会使应用程序崩溃 有人可以建议如何在使用前检查指针吗
  • 在 Activity 的 onDestroy 方法中保存数据

    我正在编写一个任务列表并拥有 Project 对象 其中包含所有任务 和元数据 我使用操作日志 因此当任务发生变化时 我不会立即将其保存到数据库中 而是将其保留在内存中 以便在活动完成时转储到数据库中 Activity 的 onDestro
  • Django 异步处理

    我有一堆 Django 请求 它们执行一些数学计算 用 C 编写并通过 Cython 模块执行 这可能需要不确定的时间 大约 1 秒 来执行 此外 请求不需要访问数据库 并且彼此独立且独立于 Django 现在一切都是同步的 使用 Guni
  • 如何拖动 NSStatusItems

    大家都知道 Mac OS X 中的菜单栏 或者更好的说法是 NSStatusBar 有些物品我可以移动 有些则不能 我希望能够拖动我的应用程序的 NSStatusItem 知道如何实现吗 尽管 NSStatusItems 出现在 Apple
  • 软堆:什么是损坏以及它为什么有用?

    我最近读了 Bernard Chazelle 的论文 The Soft Heap An Approximate Priority Queue with Optimal Error Rate by Bernard Chazelle http
  • 如何对部分路径使用 .htaccess 重定向?

    我必须调整网站上的一些路径 并且需要使用 htaccess 在用户访问旧网址时重定向项目 例如我的旧网址 相对 可能是 old path page1 php old path page2 php old path page3 php etc
  • 如何快速设置栏按钮的图像?

    我正在尝试为栏按钮项目设置一个图像 因为我有一个像这样的图像 分辨率为 30 30 但当我将此图像分配给 栏 按钮时 它看起来像 我已经这样分配图像 如果我尝试这种方式 例如为按钮制作 IBOutlet 并以编程方式设置图像this问题和代
  • 在新的材料设计中,是否有一个官方 API 用于在工具栏上居中标题,就像流行的 Android 应用程序一样?

    背景 过去 Google 总是显示工具栏以使标题左对齐 https material io develop android components app bar layout 然而 最近 似乎在它的一些应用程序上 标题居中 即使它的左右没有
  • 时间:2019-03-17 标签:c#XMLSchemavalidation

    我有一个很好的 XML 文件 如下所示
  • 使用 Launch4j 将 Java 应用程序固定到 Windows 7 任务栏

    我目前正在尝试将 Java 应用程序固定到 Windows 7 任务栏 该应用程序启动时使用Launch4j 程序图标显示正确 但右键单击任务栏上的图标仅显示带有 关闭窗口 条目的上下文菜单 没有用于将应用程序固定到任务栏的菜单条目 将 E
  • 使用js或html5以编程方式记录网页的音频输出?

    有没有办法以编程方式捕获使用 html5 js 或其他内容从网页播放的音频并从中创建 mp3 wav 文件 我知道网络音频 API 但我只能找到有关从麦克风输入录制音频的信息 而不是网页输出的信息 Thanks 您可以使用 Web Audi
  • Vue中JS和SCSS之间的共享变量

    我最近开始使用 Vue js 2 并且我很喜欢单文件组件结构
  • AngularJS orderby 整数字段无法正常工作

    我刚刚拿了最简单的演示http docs angularjs org api ng filter orderBy只需将年龄的值更改为不同的位数即可 它停止按预期工作 它的顺序类似于 字符串 而不是 整数 值 我应该如何更改它 以便它按年龄排