按数字排序为String - AngularJS

时间:2018-01-19 11:51:55

标签: angularjs-orderby

我想按'数字'对表格进行排序。这些“数字”代表应用程序的版本号或它们的依赖性。它们看起来像“2.11.7”或“6.41.6”。因此,我无法将它们转换为数字。但是当像String一样处理它们时,角度命令不能正确地对它们进行排序。更具体一点:

  • 2.11.5
  • 2.11.5
  • 2.11.7
  • 2.11.7
  • 2.11.5

将最终进入(DESC)

  • 2.11.7
  • 2.11.7
  • 2.11.5
  • 2.11.5
  • 2.11.7

或(ASC)

  • 2.11.7
  • 2.11.5
  • 2.11.7
  • 2.11.7
  • 2.11.5

现在我卡住了。知道如何解决这个问题吗?

1 个答案:

答案 0 :(得分:1)

排序可以通过普通的javascript来完成。以下是从accepted answer改编的示例

的示例

就AngularJ而言,要提供order by also allows for a custom comparator。这里他们有一个自定义比较器的例子来对值进行排序。它需要的是使用类似于上面的函数(或您自己的逻辑)来提供自定义比较器。可以通过传递true / false来通过表达式提供排序方向的标志。

以下是根据自己的示例编辑的plunker,以提供您的值。随意玩。此示例将在the Plunker environment中正常运行。此处列出了代码

(function(angular) {
    'use strict';
    angular.module('orderByExample4', [])
        .controller('ExampleController', ['$scope', function($scope) {
            $scope.friends = [
                { name: 'John', favoriteLetter: '2.11.5' },
                { name: 'Mary', favoriteLetter: '2.11.5' },
                { name: 'Mike', favoriteLetter: '2.11.7' },
                { name: 'Adam', favoriteLetter: '2.11.7' },
                { name: 'Julie', favoriteLetter: '2.11.5' }
    ];

            function pad(version) {
                var paddingString = "0000000000";
                return version
                    .split('.')
                    .map(function(majorMinorVersion) {
                        var index = paddingString.length - majorMinorVersion.length;
                        return paddingString.substr(0, index) + majorMinorVersion;
                    })
                    .join('.');
            }

            $scope.localeSensitiveComparator = function(v1, v2) {
                // If we don't get strings, just compare by index
                if (v1.type !== 'string' || v2.type !== 'string') {
                    return (v1.index < v2.index) ? -1 : 1;
                }

                var a = pad(v1.value);
                var b = pad(v2.value);
                return a.localeCompare(b);
            };
  }]);
})(window.angular);