angular select ng-option with object of objects

Question

I have the following object that I wish to use to populate a select box.

This is enable the selection of icon marker on a map.

    $scope.map_icons = {
        bar: {
            type: "bar",
            iconUrl: "dir/bar.png",
            shadowUrl: null,
            shadowRetinaUrl: null,
            iconSize: [32, 37],
            iconAnchor: [16, 37],
            popupAnchor: [0,-32]
        },
        restaurant: {
            type: "restaurant",
            iconUrl: "dir/restaurant.png",
            shadowUrl: null,
            shadowRetinaUrl: null,
            iconSize: [32, 37],
            iconAnchor: [16, 37]
        },
        deli: {
            type: "deli",
            iconUrl: "dir/fastfood.png",
            shadowUrl: null,
            shadowRetinaUrl: null,
            iconSize: [32, 37],
            iconAnchor: [16, 37]
        },
        sandwhichbar: {
            type: "sandwhichbar",
            iconUrl: "dir/sandwhich.png",
            shadowUrl: null,
            shadowRetinaUrl: null,
            iconSize: [32, 37],
            iconAnchor: [16, 37]
        }
    };

and in my template:

    <select ng-model="newMarker.icon" ng-options="key for (key.iconUrl, key) in map_icons">
        <option value="">-- choose icon --</option>
    </select>

The desired output would be:

    <select>
        <option value="">-- choose icon --</option>
        <option value="dir/bar.png">bar</option>
        <option value="dir/restaurant.png">restaurant</option>
        <option value="dir/fastfood.png">deli/option>
        <option value="dir/sandwhich.png">sandwhichbar</option>
    </select>

Look at this question stackoverflow.com/questions/21697695/… — Merlin
– Merlin, Commented May 27, 2014 at 6:05
Thanks Lorenzo but that is not referencing ng-options and it is utilising an array of objects. I'd very much prefer to achieve this via the ng-options method and using the object of objects as it will help A LOT in other parts of the code. — Ian Wood
– Ian Wood, Commented May 27, 2014 at 6:28
I have updated the answer according to object of objects. Please check. — Gaurav
– Gaurav, Commented May 27, 2014 at 6:53

Gaurav · Accepted Answer · 2014-05-27 07:49:57Z

Angular won't generate the required markup. Sorry. But there is a work around. I modified it a little bit.

$scope.map_icons = [
        {
            type: "bar",
            iconUrl: "dir/bar.png",
            shadowUrl: null,
            shadowRetinaUrl: null,
            iconSize: [32, 37],
            iconAnchor: [16, 37],
            popupAnchor: [0,-32]
        },
        {
            type: "restaurant",
            iconUrl: "dir/restaurant.png",
            shadowUrl: null,
            shadowRetinaUrl: null,
            iconSize: [32, 37],
            iconAnchor: [16, 37]
        },
        {
            type: "deli",
            iconUrl: "dir/fastfood.png",
            shadowUrl: null,
            shadowRetinaUrl: null,
            iconSize: [32, 37],
            iconAnchor: [16, 37]
        },
        {
            type: "sandwhichbar",
            iconUrl: "dir/sandwhich.png",
            shadowUrl: null,
            shadowRetinaUrl: null,
            iconSize: [32, 37],
            iconAnchor: [16, 37]
        }

    ];

And the mark up would be

<div ng-controller="ItemCtrl">
        <select ng-model="newMarker.icon" ng-options="icon.iconUrl as icon.type for icon in map_icons">
        <option value="">-- choose icon --</option>
    </select>{{newMarker.icon}}

Now, though the generated mark up would be.

    <select ng-model="newMarker.icon" ng-options="icon.iconUrl as icon.type for icon in map_icons" class="ng-valid ng-dirty">
<option value="" class="">-- choose icon --</option>
<option value="0">bar</option>
<option value="1">restaurant</option>
<option value="2">deli</option>
<option value="3">sandwhichbar</option>
</select>

But your ng-model would have the iconUrl of the image.

[EDIT for Object of Objects]

You can get the required mark up, if you use ng-repeat instead of ng-options and stick to object of objects. If you are fine with array of objects, you are good to go with above solution.

<div ng-controller="ItemCtrl">
        <select ng-model="newMarker.icon" >
        <option ng-repeat="(key, value) in map_icons" label="{{value.type}}" value="{{value.iconUrl}}"></option>
        <option value="">-- choose icon --</option>
    </select>
{{newMarker.icon}}

But I recommend against it.

thanks hasH - yeah I'm not gonna use repeat - its all about the ngOptions! I'll look at providing the data in a slightly different format - was hoping the docs (docs.angularjs.org/api/ng/directive/select) would yield the result but I've tried a few things and what you presented is the only way I've found so far.

Collectives™ on Stack Overflow

angular select ng-option with object of objects

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related