AngularJS - ng-repeat 中的顺序不正确

2023-11-25

我在我的控制器中定义了这样的章节:

  $scope.chaps =  [{"id":"1","chap_no":"1","name":"chap 1"},
                  {"id":"2","chap_no":"2","name":"chap 2"},
                  ...
                  {"id":"14","chap_no":"14","name":"chap 14"},
                  {"id":"15","chap_no":"15","name":"chap 15"}];

在视图中,我有:

<li ng-repeat="ch in chaps | orderBy:'chap_no'">{{ch.name}}</li>

但我得到了错误的顺序(1后10,2后20,依此类推)

chap 1, chap 10, chap 11, chap 12, chap 13, chap 14, chap 15, chap 2, chap 3, ...

这是笨蛋:http://plnkr.co/edit/Pc84ooB6dp2zoHXeawYn?p=preview

谁能告诉我我在这里做错了什么


Your chap_no属性是一个字符串,因此它按字符串排序。

您可以创建一个自定义filter like:

app.filter('customSort',function(){
    function sort (a, b) {
        if (a > b) { return 1; }
        if (a < b) { return -1; }

        return 0;
    }

    return function(arrInput, prop) {
        var arr = arrInput.sort(function(a, b) {
            return sort(+a[prop], +b[prop]);
        });
        return arr;
    }
})

那么在你的 html 中你可以像这样使用过滤器:

<li ng-repeat="ch in chaps | customSort:'chap_no'" >{{ch.name}}</li>

例子:http://plnkr.co/edit/UWvinthK9r0zgRbHMCGd?p=preview

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

AngularJS - ng-repeat 中的顺序不正确 的相关文章

随机推荐

  • JavaFX 中的 HTML 编辑选项

    我希望将基于 Swing 的应用程序中使用的 HTML 编辑器替换为基于 JavaFX 的编辑器 据我所知 有两种可能的选择 1 使用JavaFX HTML 编辑器 虽然这对于功能来说非常好does有 它仍然缺乏其他几个功能 例如插入图像
  • 移动应用程序的 OAuth2 流程

    我们有一个预先存在的移动应用程序 用户将注册他的用户名和密码 目前我们有一个基于自定义令牌的身份验证 我们希望在不影响用户体验的情况下切换到 OAuth2 看起来资源所有者密码凭证对我们来说是最接近的流程 但是有很多建议反对使用它们 任何其
  • 使用斯坦福 NLP 检测语言

    我想知道是否可以使用Stanford CoreNLP检测句子是用哪种语言写的 如果是这样 这些算法的精确度如何 几乎可以肯定的是 斯坦福 COreNLP 目前还没有语言识别功能 几乎 因为不存在更难证明 编辑 尽管如此 以下是间接证据 也没
  • If 语句与函数指针

    目标是根据复选框是否打开或关闭来更改事件循环中的行为 我能想到的最简单的方法就是每次运行循环时测试复选框状态 if statement void action void someLoop if checkboxTrue action oth
  • AngularJS $http 从失败的 CORS 请求返回状态代码 0

    好吧 我已经查遍了这个 基本上我们使用的是跨域请求的 http 请求 我们的服务器允许该域 当请求返回 200 时 一切正常 然而 每当我们的服务器返回错误 500 401 无论什么时候 Angular 都会认为这是 CORS 问题 我使用
  • 客户端和服务器端编程有什么区别?

    我有这个代码 为什么这不会将 bar 写入我的文本文件 而是警告 42 注意 这个问题的早期修订明确涉及服务器上的 PHP 和客户端上的 JavaScript 问题的本质和解决方案是相同的any当一种语言在客户端上运行而另一种语言在服务器上
  • 访问修饰符 - 目的是什么?

    一般来说 我对编程比较陌生 我想知道是否有人可以帮助我理解访问修饰符的目的 我知道他们为类和变量等设置了不同的访问级别 但为什么要限制对这些内容的访问权限 不允许访问不同的东西有什么意义 为什么不只允许访问所有内容呢 抱歉 如果这是一个愚蠢
  • 未使用的装配参考的成本是多少?

    我想知道在 NET 解决方案中引用程序集的各种成本是多少 我对技术和组织成本都感兴趣 一些例子 未使用的程序集包含需要传送的额外字节 下载时间更长 浪费空间 未使用的程序集可能包含可利用的安全漏洞 未使用的程序集可能会产生额外的启动成本 未
  • 使用 Selenium 和 Python 查找存在 data-tb-test-id 属性而不是 id 的元素

    我正在尝试使用 Selenium 查找元素 但没有找到 请遵循 HTML 代码 div style font size 12px font weight normal color 000000 display inline block pa
  • 如何使 D3 强制布局中的标签和节点可单击以导航到 URL?

    我正在使用 D3 使用基于力的布局 并且想知道当我单击节点或标签时是否可能会自动转到存储在该节点 标签中的 url 如果是的话 我怎样才能实现这一目标 这就是图表的实际外观 标签指示 URL 本身 我正在分享我用来生成 D3 图的 Java
  • 使用 CSS 子选择器会更快吗?

    如果我们想定位段落内的链接 哪个选择器会更有效 更快 p a or p gt a 第二个 极其 稍微快一些 CSS 由浏览器反向处理 因此您的两个规则都会在所有a页面上的元素 对于第二条规则 它只需要测试直接父级 对于另一条规则 它需要测试
  • setter 和 getter 方法是否会破坏封装? [关闭]

    Closed 这个问题是基于意见的 目前不接受答案 有人告诉我们应该避免 setter 和 getter 关于它有各种各样的想法 但根据我的说法 使用这些会破坏封装 为什么 因为它告诉世界一个物体的内部结构 例如 class Point p
  • 新的 React 应用程序安装后无法立即编译

    我已经使用 React Native 一段时间了 但我想我应该在网络上尝试 React 所以我遵循了这个指南 https reactjs org docs create a new react app html但使用后npx create
  • vi 的 splitview 上的 Linux shell (bash)

    我一直在寻找将 bash 集成到 vi 中的方法 但没有找到任何结果 如 emacs 中的功能 问题是 我用 vi 打开了 2 个视图 其中一个打开了 split命令 我想通过第二个视图使用 bash 而我正在第一个视图中编辑文件 如果我做
  • 众所周知的“进程因 StackOverflowException 而终止”屏幕是如何出现的?

    一个好奇的问题 如果当前进程的堆栈已满 如何出现众所周知的 进程因 StackOverflowException 而终止 屏幕 是运行时保存一些寄存器以使其正常降级 还是可能是一个内部技巧 可能会运行另一个临时进程来显示此屏幕 附 知道这个
  • Eclipse Spring Tools 缺少内容辅助/自动完成

    新的一年 新的问题 我正在一台 Linux 机器上工作 并且刚刚安装了一个新的 Eclipse Version Oxygen 2 Release 4 7 2 Build id 20171218 0600 JRE java version 1
  • 最佳实践:如何跟踪出站链接?

    由于请求记录在目标服务器上 而不是您的服务器上 因此如何跟踪网站的出站链接 您可以向页面添加一个快速 JQuery 脚本 该脚本将跟踪外部链接 并且可以将它们重定向到服务器上的一个文件 该文件将跟踪该链接 然后转发到该文件 或者添加一个 a
  • has_many :通过多个 has_one 关系?

    我正在为我们的教会编写一个 Rails 指导计划 我对 Rails 还很陌生 我需要对此进行建模 contact has one father class name gt Contact has one mother class name
  • 使用 CMake 构建外部项目时作业服务器不可用

    我正在尝试在 linux 上使用 CMake 构建一些外部项目ExternalProject add 然而 他们并不尊重make j12命令 并发出警告 warning jobserver unavailable using j1 Add
  • AngularJS - ng-repeat 中的顺序不正确

    我在我的控制器中定义了这样的章节 scope chaps id 1 chap no 1 name chap 1 id 2 chap no 2 name chap 2 id 14 chap no 14 name chap 14 id 15 c