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

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

本文关键字：排序 过滤器 ng-options 自定义      更新时间：2023-09-26

我在选择元素上使用自定义排序过滤器和ng-options时遇到问题。问题是，它不排序我的数字值，因为它应该。

你可以在下面的plnkr中看到这个问题，它应该对'id'值进行排序，但是select元素中的排序非常奇怪。

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

预览

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>

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过滤器。不确定为什么要为一个微不足道的任务使用自定义过滤器。

是否这个小提琴为您工作。我不太明白你的(key, value)。我就是这么做的。

这并不奇怪。你没有使用正确的语法。Angular在这个过滤器上出错了。

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

这是更新后的Plunker

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

我刚刚把它改成了value，一切都很好。

希望有所帮助

相关文章：