Angularjs два блока выбора, подключенные к объектам одной модели - выбранная опция

Question

У меня проблема с двумя блоками выбора, которые связаны с одним объектом. Я создал плункер, но это нормально, но не в моем приложении. В основном я копировал все, начиная с моего кода и заканчивая плункером, и работает там, но не в моем коде. Вот ссылка: plnkr

app.controller('MainCtrl', function($scope) { 
     $scope.consoleLog = ''; 
     $scope.sites = [ 
{name: 'site1', id: 001, datasources:[ 
    {name: 'one', id: 441}, 
    {name: 'two', id: 442}, 
    {name: 'three', id: 443} 
]}, 
{name: 'site2', id: 002, datasources:[ 
    {name: 'four', id: 444}, 
    {name: 'five', id: 445}, 
    {name: 'six', id: 446}, 
    {name: 'seven', id: 447} 
]}]; 

$scope.selectedSiteIndx = 0; 
$scope.selectedSite = $scope.sites[$scope.selectedSiteIndx].id; 
$scope.selectedDs = $scope.sites[$scope.selectedSiteIndx].datasources[0].id; 

$scope.selectedSiteChanged = function (selectedSite){ 
    var siteIndx = $scope.sites.map(function(e){return e.id}).indexOf(selectedSite); 
    $scope.selectedDs = $scope.sites[siteIndx].datasources[0].id; 
    $scope.selectedSite = selectedSite; 
    $scope.selectedSiteIndx = siteIndx; 
}; 
$scope.selectedDsChanged = function(selDs){ 
    $scope.selectedDs = selDs; 
    $scope.consoleLog += 'selected:'+selDs+', '; 
}; 
    }); 

У меня есть два полей выбора есть. Во-первых, для выбора сайта. Во-вторых, для выбора источника данных. Когда вы выбираете сайт в первом поле, чем второй флажок, он изменит его список на вложенный источник данных из нового объекта. И он работает нормально, без проблем. Вы можете изменить сайт, и новые данные будут заполнены во втором поле. Я хочу иметь выбранный по умолчанию (1-й вариант avialable). Поэтому, когда вы выберете сайт, будет автоматически выбран первый источник данных на сайте. Проблема в моем приложении (по какой-то причине не в plnkr) - это когда я выбираю другой источник данных из box2 и затем меняю сайт в 1-ом ящике. Первая опция по умолчанию не выбрана автоматически. Прежде чем я сменил источник данных, я могу менять сайт много раз, и всегда будет выбран первый вариант в окне источников данных. Но как только я коснусь окна источника данных, он остановлен. Как я уже сказал, вы не можете видеть это на plnkr. Я также заметил, что прослушиватель событий изменения источника данных запускается с источником данных Id = null при смене сайта. Но это произошло только после того, как я коснулся коробки № 2

Любые идеи, почему? Я попробовал много разных опций, выбранных ect. Не могу заставить его работать. Я просто хочу, чтобы первый вариант всегда был выбран.

Answer 1

Пока вы не знаете, почему это не работает в вашем приложении и работает в плункерах.

Я просто дам вам более чистый способ выполнить ту же работу ... в конечном итоге может решить вашу проблему.

Во-первых увидеть его в работе в этом plunker

Я просто использовать целые объекты вместо того, чтобы использовать индекс (который был действительно сбивает с толку)

<select ng-options="site as site.name for site in sites" 
    ng-model="selectedSite" ng-change="selectedDs = selectedSite.datasources[0]"></select> 
<select ng-options="ds as ds.name for ds in selectedSite.datasources" 
    ng-model="selectedDs"></select> 

Обратите внимание, что это site as и ds as вместо site.id и ds.id.

Я также использую непосредственно коллекцию вложенной вашей модели значения в selectedSite.datasources

В контроллере я просто инициализировать значения

$scope.selectedSite = $scope.sites[0]; 
$scope.selectedDs = $scope.selectedSite.datasources[0]; 

У меня тоже есть эти нг-изменения на первый входе

ng-change="selectedDs = selectedSite.datasources[0]" 

Надеюсь, что это волшебство решило вашу проблему.