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

Question

我在 select 元素上使用自定义排序过滤器和 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>

Answer 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)。这就是我会做的。

Answer 2

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

您不需要(key, value) ng-options。过滤器语法正确。

这是更新后的 Plunker

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

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

希望对您有所帮助

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

Weird sort behaviour when using custom sort filter on ng-options

javascript

angularjs

sorting

ng-options