Question

我有一个选择菜单如下：

<select ng-model="selected_event_type.event_type"
        ng-options="event_type.name for event_type in events.event_type_views">
    <option value="">Event type</option>
</select>

我还有以下单独的选择菜单：

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

第一个选择菜单按预期工作。在第二个选择菜单的currentEventChanged（）方法中，我更改了selected_event_type.event_type的值，但第一个选择菜单没有更新以反映这一点，我无法弄清楚原因。

以下是我的控制器的相关代码：

$scope.selected_event_type = {
    event_type: null
};

$scope.events = {
    event_type_views: [
        {name: 'Collision', partial: 'views/events/collision.html'},
        {name: 'Boundary', partial: 'views/events/boundary.html'},
        {name: 'Timer', partial: 'views/events/timer.html'},
        {name: 'Input', partial: 'views/events/input.html'}
    ]
}

$scope.currentEventChanged = function () {
    var current_event_type;
    var current_event_partial;

    for (var key in $scope.current_event.event_type) {
        current_event_type = key.charAt(0).toUpperCase() + key.slice(1);
    }

    current_event_partial = 'views/events/' + current_event_type + '.html';

    $scope.selected_event_type = {
        event_type: {
            name: current_event_type,
            partial: current_event_partial
        }
    };
};

Answer 1

我想我知道这个问题。您将第一个列表绑定到列表events.event_type_views。而模型为selected_event_type.event_type。选择元素时，模型会更新所选对象（例如{name: 'Collision', partial: 'views/events/collision.html'}）。

currentEventChanged方法无法创建新对象并设置值，因为比较是基于对下拉列表中所选内容的引用而完成的。方法中的逻辑不应该创建新对象，而应该从现有列表中选择对象，如

$scope.selected_event_type.event_type= $scope.events.event_type_views[0]; //Logic to search the array events.event_type_views and find an element and assign

模型更改时，选择菜单不会更改

1 个答案: