AngularJS組合框中選擇不更新模型

我得到通過AJAX的陣列，它看起來像這樣AngularJS組合框中選擇不更新模型

$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功能更新 - 怎麼可能？

來源

2016-11-06 Mawg

只是胡亂猜測，但是這可能與你不使用的事實有關在'ng-model'中的一個點，請參閱，例如，[這裏]（http://stackoverflow.com/questions/18128323/if-you-are-not-using-a-dot-in-your-angularjs -models - 你 - 是 - 做 - 它 - 是錯誤的）。無論如何，我無法重現這個問題。你可以添加一個Plunker/JSFiddle嗎？啊哈！ – masa

啊！兒童範圍問題？ – Mawg

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

更改收到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 :-)

來源

2016-11-06 16:12:10 Mawg

符合本規則的效果很好，

<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

來源

2016-11-06 14:57:49 Sajeetharan

你改變了什麼？我看到它在你的Plunk中工作，但即使當我將eventNameData中的x.title改爲事件event.title for eventNameData時，我仍然有問題。我看不出你還有什麼改變 – Mawg

AngularJS組合框中選擇不更新模型

回答

相關問題