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

0

У меня проблема с двумя блоками выбора, которые связаны с одним объектом. Я создал плункер, но это прекрасно, но не в моем приложении. В основном я копировал все, от моего кода до плункера, и он работал там, но не в моем коде. Здесь ссылка: 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+', ';
};
    });

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

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

  • 1
    Используете ли вы ту же версию angularjs, что и в plnkr?
  • 0
    Да. 1.4.3 в моем приложении. Я пробовал с предыдущей угловой версией, а также то же самое.
Показать ещё 3 комментария
Теги:
angularjs-ng-change
angularjs-ng-options

1 ответ

0
Лучший ответ

Пока вы не знаете, почему это не работает в вашем приложении и работает в 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-изменение на первом входе

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

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

  • 0
    Ваша версия работает. Большое спасибо за ваше время. Мне также пришлось подключить прослушиватель событий для изменения ds, чтобы получить от него дополнительные данные, поэтому с некоторыми изменениями мне удалось, чтобы он работал. До сих пор не знаю, почему моя версия не работает, и я попробовал много разных подходов, чтобы сделать это. Спасибо однажды

Ещё вопросы

Сообщество Overcoder
Наверх
Меню