AngularJS select directive out of order with array bound to select directive in the model

Question

I am creating a simple select directive with angularjs.

My problem is that the order of the options in the select directive are out of order.

The directive gives numeric options up to 100. I first build an array using a loop when my controller is first created and add it to the model.

 var init2 = 1;
 var percentageAmount = [];
 while(init2 != 100) {
     var current = {value:init2, id:init2};
     percentageAmount[init2] = current;
     init2++;
 }
 $scope.percentageAmounts = percentageAmount;
 $scope.percentageAmount = 1;

I then bind to that array on the template.

Percentage Amount:

<select ng-model="$parent.percentageAmount" name="percentage-amount" id="percentage-amount" ng-options="value.id as value.value for (key,value) in $parent.percentageAmounts" required>
</select>

and find that the options are out of order in the dom. It looks like it's grouping it all alphabetically (with numbers being highest).

enter image description here

I find this confusing because I also have created arrays of non numerically based values and bound those to select directives and the options that show up in the select directive in the document object model always are in the same order as the ordering in the array which the select directive is bound

Category:
<select ng-model="couponCategory" name="coupon-category" id="coupon-category" ng-options="value.id as value.value for (key,value) in couponCategories" required>
</select>

Here is the array building logic for that last select directive

$scope.couponCategories = [{value:"Whole Order", id:"Whole Order"},{value:"Per Item", id:"Per Item"},{value:"Per Item Quantity", id:"Per Item Quantity"},{value:"In A Category", id:"In A Category"}];

enter image description here

I've experimented with changing all of the array values to integer based strings (on the id, the value and both)

Has anyone ran across this and found a solution? I would be much obliged if you can help.

you are building options entries as strings and they are being sorted correctly — mortsahl
– mortsahl, Commented May 7, 2014 at 0:45
A simpler alternative to your select box is a number input with a min and max value set: w3schools.com/html/… — sdornan
– sdornan, Commented May 7, 2014 at 4:23

gkalpak · Accepted Answer · 2014-05-09 16:45:26Z

2

This happens because you "treat" the array as an object, so the numeric indices are interpreted as string property-names of an object.

Angular thinks its an object, because of the form of ngOptions that you use:

... for (key, value) in ...

In order for Angular to know it is an array, you can change it like this:

<select ... ng-options="amount.id as amount.value for amount in percentageAmounts">
</select>

See, also, this short demo.

edited May 9, 2014 at 16:45

answered May 7, 2014 at 6:41

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS select directive out of order with array bound to select directive in the model

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related