I have an object which looks like:
{
3019: 'Javascript',
3046: 'Css'
}
and then, I show this object in a select like:
<select
ng-model="langChoosed"
ng-options="key as value for (key, value) in progLanguages"
></select>
I need to sort the items inside the select but the orderBy filter, seems to work only on arrays, how can I make it work with objects?
NO order by can't be applied to a plain object, alternatively you can define a method in the controller to convert the object to an array
DEMO
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
function($scope) {
$scope.progLanguages = {
3019: 'Javascript',
3046: 'Css'
};
$scope.templatesAry = function() {
var ary = [];
angular.forEach($scope.progLanguages, function(val, key) {
ary.push({
id: key,
lang: val
});
});
return ary;
};
}
]);<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>To Do List</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
<body ng-controller="dobController">
<select class="form-control" id="selection" ng-model="currentSelected" ng-options="selection.id as selection.lang for selection in templatesAry() | orderBy:'lang'"></select>
</body>
</html>Object keys are unordered - so you can't sort them. Convert your object to an array, sort it, then use it:
var sortedArrayFromObject = Object.keys($scope.progLanguages).map(function(key) {
var obj = {};
obj["key"] = key;
obj["value"] = $scope.propLanguages[key];
return obj;
});
//Sort it
sortedArrayFromObject.sort(function(a, b) {
return +a.key - +b.key; //since all keys are strings - do an int cast with "+"
});
//Assign it
$scope.sortedArray = sortedArrayFromObject;
Use it:
<select
ng-model="langChoosed"
ng-options="item.key as item.value for item in sortedArray"></select>
is something like this ok for you?
var myObj = {
3046:'Css',
3019:'Javascript'
};
var keys = [];
angular.forEach(myObj, function(value,key){
keys.push(key);
});
keys.sort();
$scope.myObj2={};
angular.forEach(keys, function(key){
$scope.myObj2[key]=myObj[key];
});
and your html
<select
ng-model="langChoosed"
ng-options="key as value for (key, value) in myObj2"
></select>
ng-repeat; reduces to the same problem, however) discussed here.