在 ng-options 上使用自定义排序过滤器时的奇怪排序行为答案

【问题标题】：Weird sort behaviour when using custom sort filter on ng-options在 ng-options 上使用自定义排序过滤器时的奇怪排序行为
【发布时间】：2016-08-09 12:44:35
【问题描述】：

我在使用我的自定义排序过滤器和选择元素上的 ng-options 时遇到问题。问题是它没有按应有的方式对我的数值进行排序。

你可以在下面的 plnkr 中看到问题，它应该按 'id' 值排序，但是 select 元素中的排序很奇怪。

http://plnkr.co/edit/Z99aEFLuWUFWuyc8GM9t?p=preview

var app = angular.module('testApp', []);

app.filter('sortKeyIds', function() {
    return function(input) {
      
        //Copy original list
        var keys = input.concat([]);
        
        keys.sort(function(a, b) {
            return a.id - b.id;
        });
        
        return keys;
    }
});

app.controller('MainController', function($scope) {
    $scope.controllerName = "MainController";
    $scope.months = [
      {"id":15,"val":"15x250"},
      {"id":88,"val":"88x31"},
      {"id":120,"val":"120x90"},
      {"id":125,"val":"125x125"},
      {"id":160,"val":"160x600"},
      {"id":180,"val":"180x150"},
      {"id":234,"val":"234x60"},
      {"id":240,"val":"240x400"},
      {"id":250,"val":"250x250"},
      {"id":300,"val":"300x100"},
      {"id":336,"val":"336x280"},
      {"id":468,"val":"468x60"},
      {"id":720,"val":"720x300"},
      {"id":728,"val":"728x90"},
      {"id":980,"val":"980x300"},
      {"id":1250,"val":"1250x250"}
      ];
});

<!-- begin snippet: js hide: false console: true babel: false -->

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>AngularCameraApp</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
  </head>

  <body ng-app="testApp" ng-controller="MainController">
    <h3>Weird sorting</h3>
    <select ng-model="avtripExpMonth" ng-options="value.lang as value.val for (key, value) in months | sortKeyIds"></select>
  </body>

</html>

【问题讨论】：

请把完整的代码复制出来，看看问题在的问题中，不只是链接。 Stack Snippets（<> 工具栏按钮）允许您在此处现场执行可运行的示例。

标签： javascript angularjs sorting ng-options

【解决方案1】：

var app = angular.module('testApp', []);

/* You could remove this part.
app.filter('sortKeyIds', function() {
    return function(input) {
      
        //Copy original list
        var keys = input.concat([]);
        console.log(keys);
        keys.sort(function(a, b) {
            return a.id - b.id;
        });
        
        return keys;
    }
});*/

app.controller('MainController', function($scope) {
    $scope.controllerName = "MainController";
    $scope.months = [
      {"id":15,"val":"15x250"},
      {"id":88,"val":"88x31"},
      {"id":120,"val":"120x90"},
      {"id":125,"val":"125x125"},
      {"id":160,"val":"160x600"},
      {"id":180,"val":"180x150"},
      {"id":234,"val":"234x60"},
      {"id":240,"val":"240x400"},
      {"id":250,"val":"250x250"},
      {"id":300,"val":"300x100"},
      {"id":336,"val":"336x280"},
      {"id":468,"val":"468x60"},
      {"id":720,"val":"720x300"},
      {"id":728,"val":"728x90"},
      {"id":980,"val":"980x300"},
      {"id":1250,"val":"1250x250"}
      ];
});

/* Styles go here */

.one {
  font-size:2em;
}
.two {
  color:red;
}
.aclass {
  text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>AngularCameraApp</title>
    <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script src="https://code.angularjs.org/1.3.15/angular-route.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="testApp" ng-controller="MainController">
    <h3>Weird sorting</h3>
    <select ng-model="avtripExpMonth" ng-options="month.val for month in months track by month.id | orderBy:month.id"></select>
    <ul id="preview"></ul>
  </body>

</html>

你可以使用 Angular 的 orderBy 过滤器。不知道为什么要为琐碎的任务使用自定义过滤器。

this fiddle 是否适合您。我真的不明白你的(key, value)。我就是这样做的。

【讨论】：

【解决方案2】：

这并不奇怪。您没有使用正确的语法。 Angular 在那个过滤器上坏了。

ng-options 不需要(key, value)。而且过滤器语法是正确的。

这是更新后的Plunker

<select ng-model="avtripExpMonth" ng-options="value.lang as value.val for value in months | sortKeyIds"></select>

我刚刚将其更改为value，一切正常。

希望对你有帮助

【讨论】：