current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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>
share|improve this question
    
Look at this question stackoverflow.com/questions/21697695/… –  Lorenzo May 27 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 May 27 at 6:28
    
I have updated the answer according to object of objects. Please check. –  hasH May 27 at 6:53

1 Answer 1

up vote 0 down vote

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.

share|improve this answer
    
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. –  Ian Wood May 27 at 8:53
    
I am glad to help. :) –  hasH May 27 at 9:37

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.