具有两位数的 ng-repeat orderBy答案

【问题标题】：ng-repeat orderBy with double digit number具有两位数的 ng-repeat orderBy
【发布时间】：2017-11-27 23:52:39
【问题描述】：

我有这样的名字：

Name - Page 9
Name - Page 2
Name - Page 6
Name - Page 15
Name - Page 1
Name - Page 12
Name - Page 14
Name - Page 13
Name - Page 10
Name - Page 11

目前我在做：

<div ng-repeat="data in results | orderBy:'-name'">
{{ data.name }}
</div>

但它并没有考虑到数字来排序。

有谁知道我怎样才能确保它是按照数字排序的？

【问题讨论】：

标签： angularjs angularjs-ng-repeat angularjs-orderby

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
</head>
<body data-ng-app="app">
        <div data-ng-controller="testC">
        <div ng-repeat="data in results | orderBy:['name']">-{{data.name}}</div>
        </div>
</body>
</html>
<script type="text/javascript">
        var app = angular.module('app', []);
        app.controller('testC', ['$scope', function($scope) {
        $scope.results = [{'name':'Page 21'},
        {'name':'Page 12'},
        {'name':'Page 10'},
        {'name':'Page 01'},
        {'name':'Page 30'},
        {'name':'Page 15'},
        {'name':'Page 05'}];
        }]);
</script>

它对我有用，请尝试一次。 https://jsfiddle.net/shivtumca12/nqbLLr4x/ 还有

https://jsfiddle.net/shivtumca12/LxLu8v70/

【讨论】：

那是因为你把0 放在个位数的前面 - 即。 01 而不是 1
@bryan 但第二个工作正常，一旦检查两个，请告诉我，我哪里错了。
您的第二个 jsfiddle 代码没有提供问题的解决方案，因为您忽略了文本并且那里只有数字。该问题要求一种方法对项目进行排序，以便在末尾有数字的文本中排序。

【解决方案2】：

它应该按预期工作。检查我创建的这个 plunker。 Plunker Code

编辑：要处理两位数，您可以编写一个自定义排序函数，如下所示：

 $scope.myValueFunction = function(value) {
  var numpart = value.name.replace( /^\D+/g, '');
  return -(numpart-1000);
}

它的作用是提取数字部分并使其成为可排序的数字。您可以删除前面的 -ve 符号以获得升序。

然后在你的html中，你可以这样调用这个函数：

<tr ng-repeat="friend in friends | orderBy:myValueFunction">
  <td>{{friend.name}}</td>
  <td>{{friend.phone}}</td>
  <td>{{friend.age}}</td>
</tr>

【讨论】：

抱歉解决了我的问题，两位数呢？