CODEWITHSUNDEEP
javascriptangularjs
beNerd
beNerd

Reputation: 3374

assign a object to select value - ng-options

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;
        }
    });

Upvotes: 1

Views: 121

Answers (2)

Lucio
Lucio

Reputation: 5408

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"}]

Upvotes: 1

qwerty_igor
qwerty_igor

Reputation: 939

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.

Upvotes: 0

Related Questions