AngularJS 组合框选择未更新模型

Question

我通过 AJAX 得到一个数组，看起来像这样

$scope.eventNameData
Array[2]
    0: Object event_id: "1"title: "Event one" __proto__: Object
    1: Object event_id: "2"title: "Event two" __proto__: Objectlength:     
2__proto__: Array[0]

所以，一个 JSON 的数组，每个条目都有一个 event_id 和一个 title。

我想显示带有每个标题的下拉组合框，并将 selected event_id 的用户存储在 $scope.selectedEventId

中

我的HTML是

  <select ng-model="analyticEvent" ng-options="x.title for x in eventNameData"
          ng-change="SelectedAnalyticEventChanged()">
  </select>

我初始化模型，当我收到 JSON 数据时，

                if (! $scope.eventNameData)
                    return;

                if ($scope.selectedEventId == -1)
                {
                    $scope.selectedEventId = $scope.eventNameData[0]['event_id'];
                    $scope.analyticEvent = $scope.eventNameData[0];
                }

并处理 select 离子变化

$scope.SelectedAnalyticEventChanged = function()
{
    $scope.selectedEventId = $scope.analyticEvent.event_id;
}

但是，当我断点时，模型的值 $scope.analyticEvent 永远不会改变。

但是，当我将 analyticEvent == {{analyticEvent}} 添加到我的 HTML 时，就在组合框之前，是当我从组合框中 select 时更新。

我做错了什么？如何将 select 的 object 的 event_id 的值转换为 $scope.selectedEventId？

[更新] 谷歌搜索，我看到一些关于 child scope 的评论 - 可能是这样吗？

[Update++] 我想我应该强调一下，如果在我的 HTML 中显示 {{selectedEventId}}，那么它会正确更新 - 即使它没有在 [=25] 中更新=] 函数 - 怎么可能？

Answer 1

使用这段代码效果很好，

  <div id="main">
      <label for="reason">Event</label>
      <select class="form-control" ng-change="SelectedAnalyticEventChanged()"   ng-model="analyticEvent" ng-options="event as event.title for event in eventNameData"></select>
    </div>

DEMO

Answer 2

啊哈！这是一个子作用域问题。

将 html 更改为

<select ng-model="analyticEvent.data" ng-options="event as event.title 
        for event in eventNameData"   ng-change="SelectedAnalyticEventChanged()">
</select>

初始化代码为

$scope.analyticEventDummyData = {"event_id" : -1,
                                 "title" : ''};
$scope.analyticEvent = {"data" : $scope.analyticEventDummyData};

在控制器启动时，并在收到 JSON 时执行此操作

                if (! $scope.eventNameData)
                    return;

                if ($scope.selectedEventId == -1)
                {
                    $scope.selectedEventId = $scope.eventNameData[0]['event_id'];
                    $scope.analyticEvent.data = $scope.eventNameData[0];
                }

并且 ng-change 代码变为

$scope.SelectedAnalyticEventChanged = function()
{
    $scope.selectedEventId = $scope.analyticEvent.data.event_id;
}

我们在该函数中看到了正确的值：

$scope.analyticEvent.data
"object:39"  
    event_id: "2"
    title: "Event two"
   __proto__: Object

四分五裂 :-)

AngularJS 组合框选择未更新模型

AngularJS combo box selection is not updating model

angularjs

drop-down-menu

angular-ngmodel