My task involves creating a basic select directive using angularjs.
However, I am facing an issue where the options in the select directive appear out of order.
The directive is meant to provide numeric options up to 100. I initialize an array using a loop when my controller is initialized and then 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 proceed to bind this array in 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>
Upon inspection, I notice that the options are not displayed in the correct order in the DOM. It seems like they're being grouped alphabetically (with numbers being treated as high values).
This discrepancy puzzles me because I have previously created arrays with non-numeric data and bound them to select directives, and in those cases, the options always appeared in the same order as the array itself.
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 logic used to build the array for the 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"}];
I have tried converting all values in the array to integer-based strings (both on the id, the value, and both)
If anyone else has encountered this issue and found a resolution, I would greatly appreciate your help.