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每個條目。

我想在$scope.selectedEventId

顯示一個下拉組合框中與每個稱號，並存儲選擇event_id用戶我的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]; 
       } 

和處理選擇具有

0改變

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

但是，當我斷點說，模型的值，$scope.analyticEvent永遠不會改變。

然而，當我添加analyticEvent == {{analyticEvent}}我的HTML，只是組合框之前，即是更新，當我從下拉框中選擇。

我在做什麼錯了？我如何獲得所選對象的event_id的值爲$scope.selectedEventId？

---

[更新]谷歌搜索，我看到一些言論有關child scope - 那會是什麼？

---

[更新++]我覺得我應該更加強調的是，如果我的HTML顯示{{selectedEventId}}，那麼它得到正確更新 - 即使它不會在ng-change功能更新 - 怎麼可能？

Answer 1

啊哈！這是一個兒童範圍問題。

更改收到JSON當HTML到

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

，並在控制器的開始intialzation代碼

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

，併爲此

   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 

狴ERAT demomstrandum :-)

Answer 2

符合本規則的效果很好，

<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