Question

我有以下对象，我希望用它来填充选择框。

这样可以在地图上选择图标标记。

    $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]
        }
    };

并在我的模板中：

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

所需的输出是：

    <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>

Answer 1

Angular不会生成所需的标记。抱歉。但是有一个解决方法。我修改了一下。

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

    ];

标记将是

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

现在，虽然生成的标记会是。

    <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>

但你的ng模型会有图像的iconUrl。

[对象对象的编辑]

如果使用ng-repeat而不是ng-options并坚持使用对象，则可以获得所需的标记。如果你对一组对象很好，你可以选择上面的解决方案。

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

但我建议反对。

带选择对象的angular select ng-option

1 个答案: