0

I've worked plenty with Angular and must be having a severe brain fart at the moment, but can't seem to get a simple orderBy to work properly. I have an array of numbers that I want sorted in order when display via an ng-repeat.

My data:

$scope.data = [200,243,190];

My markup attempts:

<div ng-repeat="split in data | orderBy">{{split}}</div>
<div ng-repeat="split in data | orderBy:split">{{split}}</div>
<div ng-repeat="split in data | orderBy:'split'">{{split}}</div>
<div ng-repeat="split in data | orderBy:['split']">{{split}}</div>

Oddly, even putting a bad parameter in doesn't seem to have any effect. No errors or nuthin'!

<div ng-repeat="split in data | orderBy:errorPlease">{{split}}</div>

Every.Single.Time. the list is shown as "200 ,243, 190

I have a JSFiddle displaying my problem. Angular 1.2.1

captain_jim1
  • 1,004
  • 1
  • 9
  • 18
  • 'split' is a local variable to the repeater of data and cannot be used for orderBy, which is trying to modify data. What you need is a filter which sorts an array of numbers. – SoluableNonagon Nov 10 '14 at 18:14
  • 1
    possible duplicate of [orderBy array item value in Angular ng-repeat](http://stackoverflow.com/questions/17936078/orderby-array-item-value-in-angular-ng-repeat) – Bryant Nov 10 '14 at 18:25
  • Not a duplicate exactly - similar problem, but the solution listed does not solve my problem. – captain_jim1 Nov 10 '14 at 18:36
  • 1
    Actually it does, give it a try. http://jsfiddle.net/HB7LU/8110/ – Bryant Nov 10 '14 at 18:39
  • In my example above, and in my JSFiddle, my first attempt is the accepted answer from the other question, but it isn't solving my problem. Using "orderBy" without any parameters still returns my array as "200, 243, 190" The JSFiddle link you posted links to my fiddle -- I think you need to click the 'update' button to get a new link to your fiddle. :) – captain_jim1 Nov 10 '14 at 18:45
  • It turns out that it's a bug in the version of Angular was using. The bug is corrected in Angular 1.3.0. – captain_jim1 Nov 10 '14 at 19:22
  • AngularJS 1.3.0-rc.5 didn't fix a bug, it added a new functionality. – Blackhole Nov 10 '14 at 20:19

3 Answers3

3

What should work is converting the number to a String and sorting by that.

<div ng-repeat="split in data | orderBy:'toString()'">{{split}}</div>

link: http://jsfiddle.net/HB7LU/8111/

Update:

The above is string sort, so it will not sort correctly if you have numbers of different length.

SoluableNonagon
  • 11,541
  • 11
  • 53
  • 98
  • That does work, but why? I would assume angular would be able to sort numerically as well. – captain_jim1 Nov 10 '14 at 18:18
  • if you look at the orderBy documentation, https://docs.angularjs.org/api/ng/filter/orderBy, you can see that orderBy takes a string, function, or array. So if you use a string, it will look for a property on the object with that string name. if you add a function, it will use <, >, or = to compare and order the values in an array. As for using an array, I've never looked into that. – SoluableNonagon Nov 10 '14 at 18:21
  • and if you try to use split from 'split in data' split is not available in the orderBy and will be null. – SoluableNonagon Nov 10 '14 at 18:22
  • 1
    Using toString will sort it incorrectly though since it is a string sort. Try adding 21 to the list of number to see. – Bryant Nov 10 '14 at 18:25
  • It seems crazy that you would need to use a custom filter to sort a simple array of a primitive type. I'm not saying that's not the case, but surely this is a basic problem that should be doable with angular-proper. – captain_jim1 Nov 10 '14 at 18:38
  • Byrant posted a link in the Question comments, that solved the sorting issue. – SoluableNonagon Nov 10 '14 at 18:41
  • I added an answer that is more appropriate to this specific problem. – captain_jim1 Nov 10 '14 at 19:04
1

Apparently this is a bug in Angular and has been resolved as of Angular 1.3.0-rc.5. Swapping out the AngularJS library from 1.2.1 to 1.3.0 RC5 fixes the bug.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular.min.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>-->
<body>
    <div ng-controller="myCtrl">
        <p ng-repeat="item in items | orderBy">{{item}}</p>
    </div>
</body>

Try it in my JSfiddle

captain_jim1
  • 1,004
  • 1
  • 9
  • 18
0

You will have to convert the numbers to strings and make sure they are the some length.

ie.     "001", "023", "200"

etc.

Orane
  • 2,223
  • 1
  • 20
  • 33