How to sort this numeric array in foreach in angularjs?

Question

I have the following scope in controller:

for(x = 1; x <= 15; x++)
{
  x = parseInt(x);
  Scope.numArr[x] = x;
}

And in the view, I have the following dropdown box using above Scope "numArr",

<select data-ng-model="printValue" ng-options="v for (k,v) in numArr| 
                        orderBy:'number()': reverse=false"> 
 <option value="">Print options</option>
</select>

I am hitting my head against the wall for not able to sort this simple array. As mentioned in Angularjs doc, it's integer array and not string type. What is the simplest Angular expression to show the values in natural order like 1,2,3,4,5...15.

Currently, Angularjs automatically sorts and shows the dropdown box as 1, 11,12... 15, 2,3..etc.

In PHP or Python, if I utilize the above array, I will have the dropdown in the same order I specified in the array and no headache. Here in AnguarJs, things are bizarre. This statement is just to make it clear that things should be as simple as possible which is what programmers like.

I strongly believe AngularJS team has over complicated this simple diplay of array values into an automatically natural-sorted list in dropdown box. It would be great if the team keeps things as simple as possible.

Any help is greatly appreciated.

For **downvote lovers**, if you are knowledgeable enough to provide a simple answer, then you should provide here that damn simple answer. Down voting only signifies your ignorance and non-acceptance of truth. — webblover, Jul 11 '14 at 05:08
Might I recommend you make this less of a rant and focus on your problem? Getting angry at everyone is a sure way to get downvotes. — Brad Koch, Jul 11 '14 at 05:17
hi Brad, I understand your point, but how could we solve this simple problem. I am having an array and would like to display it in veiw. But, If it automatically rearranges the data, what is the solution and where in doc it is mentioned? It has cost me more than 1 day and am still with no solution at hand. — webblover, Jul 11 '14 at 05:20
This might help. http://stackoverflow.com/questions/19287716/skip-ng-repeat-json-ordering-in-angular-js — Jirka Helmich, Jul 11 '14 at 05:23

Michael Kang · Answer 1 · 2014-07-11T05:31:12.653

The orderBy filter can only be used on Arrays, not object data sources.

That being said, you can easily create a custom filter that converts the object hash to an array:

   app.filter('toArray', function() { 
        return function(data) { 
           var array = [];
           for(var d in data) {
              array.push({key:d, value:data[d]});
           }

           return array;
        }
   });

Then you can apply the filter to an object data source:

<body ng-app="app" ng-controller='MyController'> 
    <div ng-repeat="item in arr | toArray | orderBy: 'key':true">
        {{item.key}}{{item.value}}
    </div>
</body>

The toArray filter converts the object data source into an array of object literals with a key and value properties. The orderBy then orders the resulting array by the property specified as the second parameter ('key' or 'value'). Finally, the third parameter specifies whether or not to reverse the array.

Using in a Select

<select data-ng-model="printValue" ng-options="item.key as item.value for item in arr | toArray | orderBy: 'key':true"> 
 <option value="">Print options</option>
</select>

Thank you, very explanatory. Still it's looks like hard method. — webblover, Jul 11 '14 at 05:31
If you bind to an array objects literals to begin with, the custom filter is unnecessary, and everything is much easier. — Michael Kang, Jul 11 '14 at 05:34

score 0 · Answer 2 · answered Jul 11 '14 at 04:57

Try this:

Controller.js:

    vm.number = 0;
    vm.sample = [];

 function activate() {
       return common.activateController([getNumber()], controllerId)
              .then(function () {
              });
    }

function getNumber(){
   for (var i = 0; i <= 15; i++) {
            i = parseInt(i);
            vm.sample.push({ number: i });
        }
 }

View.html

  <select data-ng-model="vm.number" data-ng-options="num.number as num.number for num in vm.sample | orderBy:'number'">
</select>

hi parthicool05, why do we need to write a function for this? This is a simple thing similar to '+' or '-' Scope.name to sort string data. Is't there a simpler way? — webblover, Jul 11 '14 at 05:06

Nidhish Krishnan · Answer 3 · 2014-07-11T06:23:12.790

Try this out

Non Sorted

Working Demo

html

<select data-ng-model="printValue">
        <option value="">Print options</option>
        <option ng-repeat="key in notSorted(numArr)" ng-init="value = numArr[key]" value="{{key}}">{{value}}</option>
</select>

script

 var DemoApp = angular.module("DemoApp", []);
 DemoApp.controller("DemoController",

 function DemoController($scope) {
     $scope.numArr = {};
     for (var x = 1; x <= 15; x++) {
         x = parseInt(x);
         $scope.numArr[x] = x;
     }

     $scope.notSorted = function (obj) {
         if (!obj) {
             return [];
         }
         return Object.keys(obj);
     }
 });

Non Sorted but Reverse Order

If you want to reverse the order try this

Working Demo

<option ng-repeat="key in notSorted(numArr).slice().reverse()" ng-init="value = numArr[key]" value="{{key}}">{{value}}</option>

How to sort this numeric array in foreach in angularjs?

3 Answers3

Non Sorted

Non Sorted but Reverse Order