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。

我想显示包含每个标题的下拉组合框，并将选定的用户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];
                }

并使用

处理选择更改

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

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

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

我做错了什么？如何将所选对象的event_id的值转换为$scope.selectedEventId？

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

[更新++]我想我应该更加强调，如果在我的HTML中显示{{selectedEventId}}，那么它会正确更新 - 即使它没有在ng-change函数中更新 - 怎么会这样？

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

Quod erat demomstrandum： - ）

AngularJS组合框选择不是更新模型

2 个答案: