CODEWITHSUNDEEP
javascriptangularjssortingng-options
Carl Lindth
Carl Lindth

Reputation: 57

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

I'm having issues using my custom sort filter together with ng-options on a select element. The problem is that it doesn't sort my numeric value as it should.

You can see the issue in the plnkr below, it should sort on the 'id' value, but the sorting in the select element is very strange.

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>

Upvotes: 1

Views: 79

Answers (2)

M. Junaid Salaat
M. Junaid Salaat

Reputation: 3783

It isn't weird. You are not using the right syntax. Angular broke on that filter.

You do not need (key, value) on ng-options. And filter syntax is correct.

Here is the updated Plunker

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

I've just changed it to value and everything works fine.

Hope it helps

Upvotes: 0

Mridul Kashyap
Mridul Kashyap

Reputation: 700

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>

you could use the orderBy filter by Angular. not sure why you want to use a custom filter for a trivial task.

does this fiddle work for you. i didn't really understand your (key, value). this is how i'd do it.

Upvotes: 1

Related Questions