assign a object to select value - ng-options

Question

I have a object like this

var myObject = {'123':'something','345':'something else'}

I need to render it as:

<option value={'123':'something'}>something</option>

Here is what i have tried:

ng-options="someObj as label for (id,label) in myObject

Doesn't work!

The model gets the 'label' and not the whole object. Is it even possible to assign a object to value attribute of a SELECT element?

EDIT

Filter for object of the form: {'123':'something','345':'something else'}

.filter('putKeysandValues',function(){
        return function(options){
            var arr = [];
            angular.forEach(options,function(value,key){
                arr.push({'key':key,'label':value})
            });
            return arr;
        }
    });

Answer 1

You will need to provide an object with key & value attributes to ngOptions. For this you will need to modify the structure of your object to actually have this attributes.

One way is using a filter that returns a valid array for ngOptions:

ng-options="option.label for option in data.availableOptions | putKeyAndValue"

You can check out this plunker with a working filter.

If input is:

[{'123':'something'}, {'345':'something else'}]

Then output is:

[{"123":"something","id":123,"label":"something","$$hashKey":"object:3"},{"345":"something else","id":345,"label":"something else","$$hashKey":"object:4"}]

If you want to remove the obsolete id attribute, then use this filter .

With input the same input, it will return this:

[{"id":123,"label":"something","$$hashKey":"object:3"},{"id":345,"label":"something else","$$hashKey":"object:4"}]

If you still need to return a new array, then do not do it on the filter. In that case you can process the data before passing it to the view, all in the controller like this .

With input:

{'123':'something', '345':'something else'}

Output this:

[{"id":123,"label":"something"},{"id":345,"label":"something else"}]

Answer 2

Using select as something for a (key,value) in set of Values

ng-options="key as value for (key,value) in myObject"

This will put key into the option value and value into label. With that you need to also use ng-model and ngChange. Since you can't pass objects into values, idea is to do that in your controller.

<select ng-model="val" ng-change="changeVal(val)" ng-options="key as value for (key,value) in ops">

In your controller you already have myObject you are gonna add selected item and changeVal function

<script>
    var selectedObject;
    $scope.changeVal = function(val){
        selectedObject = {};
        selectedObject[val] = myObject[val];
    }
</script>

It's a workaround without putting object into value attr since it is a string.