如何在angularjs的foreach中对这个数字数组进行排序？答案

【问题标题】：How to sort this numeric array in foreach in angularjs?如何在angularjs的foreach中对这个数字数组进行排序？
【发布时间】：2014-07-11 04:39:49
【问题描述】：

我在控制器中有以下范围：

for(x = 1; x <= 15; x++)
{
  x = parseInt(x);
  Scope.numArr[x] = x;
}

在视图中，我使用上面的 Scope "numArr" 有以下下拉框，

<select data-ng-model="printValue" ng-options="v for (k,v) in numArr| 
                        orderBy:'number()': reverse=false"> 
 <option value="">Print options</option>
</select>

因为无法对这个简单的数组进行排序，我一头雾水。如 Angularjs 文档中所述，它是整数数组而不是字符串类型。以自然顺序显示值的最简单的 Angular 表达式是什么，例如 1,2,3,4,5...15。

目前，Angularjs 自动排序并显示下拉框为 1, 11,12... 15, 2,3..等。

在 PHP 或 Python 中，如果我使用上面的数组，我将按照我在数组中指定的顺序获得下拉菜单，不会让人头疼。在 AnguarJs 中，事情很奇怪。这句话只是为了说明事情应该尽可能简单，这是程序员喜欢的。

我坚信 AngularJS 团队已经将这种简单的数组值显示复杂化为下拉框中的自动自然排序列表。如果团队让事情尽可能简单，那就太好了。

非常感谢任何帮助。

【问题讨论】：

对于downvote 爱好者，如果您的知识足以提供一个简单的答案，那么您应该在这里提供该死的简单答案。否决票仅表示您对事实的无知和不接受。
我是否可以建议您少说些废话并专注于您的问题？对每个人都生气肯定会被否决。
嗨布拉德，我明白你的意思，但是我们如何解决这个简单的问题。我有一个数组，想在视图中显示它。但是，如果它自动重新排列数据，解决方案是什么以及在文档中提到它的位置是什么？它已经花费了我超过 1 天的时间，但手头仍然没有解决方案。
这可能会有所帮助。 stackoverflow.com/questions/19287716/…
@webblover 看看我的回答

标签： javascript angularjs angularjs-ng-repeat

【解决方案1】：

orderBy filter can only be used on Arrays，不是对象数据源。

话虽如此，您可以轻松创建将对象哈希转换为数组的自定义过滤器：

   app.filter('toArray', function() { 
        return function(data) { 
           var array = [];
           for(var d in data) {
              array.push({key:d, value:data[d]});
           }

           return array;
        }
   });

然后您可以将过滤器应用于对象数据源：

<body ng-app="app" ng-controller='MyController'> 
    <div ng-repeat="item in arr | toArray | orderBy: 'key':true">
        {{item.key}}{{item.value}}
    </div>
</body>

toArray 过滤器将对象数据源转换为具有键和值属性的对象字面量数组。 orderBy 然后按指定为第二个参数（'key' 或 'value'）的属性对结果数组进行排序。最后，第三个参数指定是否反转数组。

在选择中使用

<select data-ng-model="printValue" ng-options="item.key as item.value for item in arr | toArray | orderBy: 'key':true"> 
 <option value="">Print options</option>
</select>

【讨论】：

谢谢，非常解释。看起来还是很难的方法。
如果你一开始就绑定到一个数组对象字面量，那么自定义过滤器就没有必要了，一切都变得容易了。

【解决方案2】：

试试这个：

Controller.js：

    vm.number = 0;
    vm.sample = [];

 function activate() {
       return common.activateController([getNumber()], controllerId)
              .then(function () {
              });
    }

function getNumber(){
   for (var i = 0; i <= 15; i++) {
            i = parseInt(i);
            vm.sample.push({ number: i });
        }
 }

查看.html

  <select data-ng-model="vm.number" data-ng-options="num.number as num.number for num in vm.sample | orderBy:'number'">
</select>

【讨论】：

嗨 parthicool05，为什么我们需要为此编写一个函数？这是一个类似于 '+' 或 '-' Scope.name 的简单东西，用于对字符串数据进行排序。没有更简单的方法吗？

【解决方案3】：

试试这个

未排序

Working Demo

html

<select data-ng-model="printValue">
        <option value="">Print options</option>
        <option ng-repeat="key in notSorted(numArr)" ng-init="value = numArr[key]" value="{{key}}">{{value}}</option>
</select>

脚本

 var DemoApp = angular.module("DemoApp", []);
 DemoApp.controller("DemoController",

 function DemoController($scope) {
     $scope.numArr = {};
     for (var x = 1; x <= 15; x++) {
         x = parseInt(x);
         $scope.numArr[x] = x;
     }

     $scope.notSorted = function (obj) {
         if (!obj) {
             return [];
         }
         return Object.keys(obj);
     }
 });

未排序但倒序

如果你想颠倒顺序试试这个

Working Demo

<option ng-repeat="key in notSorted(numArr).slice().reverse()" ng-init="value = numArr[key]" value="{{key}}">{{value}}</option>

【讨论】：