angularjs - 在选择中使用对象属性

Question

我目前有以下选择：

<select ng-model="current_event"
        ng-options="event.event_id for event in current_level.events.event"
        ng-change="currentEventChanged()">
</select>

current_level.events.event是一个对象数组，如下所示：

[
    {
        "event_id": 0,
        "event_type": {
            "collision": {
                "object_id1": 0,
                "object_id2": 1,
                "allow_overlap": "no"
            }
        }
    },
    {
        "event_id": 1,
        "event_type": {
            "player_input": {
                "object_id": 0,
                "level_id": 0,
                "allow_overlap": "no"
            }
        }
    }
]

选择工作完美，但每个选项的文本只是event_id，例如“0”或“1”。我希望项目的文本实际上是event_type（下划线转换为空格），例如“碰撞”或“玩家输入”。这在AngularJS中可能吗？

Answer 1

您正在使用event.event_id，因此 AngularJS 的行为没有任何问题。您应该简单地将右边label放在ng-optionsof 中<select>（请参阅文档）。

但是，您需要先调用一个函数才能获得正确的标签，因为您想要的非常复杂。

$scope.getLabel = function (eventType)
{
    var firstKey = null;
    angular.forEach(eventType, function (value, key)
    {
        if (firstKey === null)
        {
            firstKey = key;
        }
    });

    return firstKey.replace('_', ' ', 'g');
};

<select
    ng-model="current_event"
    ng-options="event.event_id as getLabel(event.event_type) for event in current_level.events.event"
    ng-change="currentEventChanged()"
>
</select>

jsFiddle