Невозможно заполнить 2-й оператор выбора

У меня есть 2 оператора выбора, первый из которых заполняется моим первым запросом веб-службы. Пользователь выбирает нужные данные при первом выборе, в котором запускается метод onChange для получения первого выбранного объекта, снова запускается веб-сервис для получения другого набора данных и заполнения второго оператора выбора.

HTML:

<div class="input-label">
  Select Kittens:
</div>
<select
ng-model ="options"
ng-options ="option.name for option in options"
ng-change="onChange(options)">
<option>--</option>
</select>   
<br>
 <div class="input-label">
  Select Age:
</div>  
<select
ng-options ="detail.age for detail in details">
<option>--</option>
</select>

Контроллер:

 .controller("ctrl",['$scope',function($scope){
        $scope.options = [
          {id:1, name:'typeA'},
          {id:2, name:'typeB'},
          {id:3, name:'typeC'},
          {id:4, name:'typeD'}
        ]

          $scope.onChange = function(item){
            console.log("Hi world!");
            console.log(item);
            $scope.details = [
          {id:1, age:'11'},
          {id:2, age:'10'},
          {id:3, age:'9'},
          {id:4, age:'6'}
        ]
    };
  }])

Проблемы:

1) После выбора 1-го выбора значение просто исчезает из поля выбора, но значение (объект) успешно передается функции onChange

2) Невозможно заполнить второе поле выбора

Я создал plunkr, чтобы воспроизвести мою проблему (без веб-сервиса). Спасибо!

Ссылка: http://plnkr.co/edit/tqI0a83PiIHNUkKLj1WF?p=preview


person Gene    schedule 20.10.2015    source источник


Ответы (3)


Из Документов

Директива select используется вместе с ngModel для обеспечения привязки данных между областью действия и элементом управления <select> (включая установку значений по умолчанию).

Кроме того, вам нужно изменить 1-й выбор ng-model, так как ng-repeat происходит options, а ng-model также совпадает с options, следует изменить его на someOpetion

Разметка

<select ng-model="someOpetion" ng-options="option.name for option in options" ng-change="onChange(options)">
    <option>--</option>
  </select>
  <br>
  <div class="input-label">
    Select Age:
  </div>
  <select ng-options="detail.age for detail in details" ng-model="someDetails">
    <option>--</option>
</select>

Планкер

person Pankaj Parkar    schedule 20.10.2015

используйте этот код: DEMO

  <div class="input-label">
    Select Kittens:
  </div>
  <select ng-model="name" ng-options="option.name for option in options" ng-change="onChange(name)">
    <option>--</option>
  </select>

  <br>

  <div class="input-label">
    Select Age:
  </div>
  <select ng-model ="age" ng-options="detail.age for detail in details">
    <option>--</option>
  </select>

Имя вашего первого ng-model = "options", но внутри контроллера вы также используете $scope.options как массив объектов.

Более того, во втором <select> нет ng-model. Но ng-options нужен ng-model.

person Upal Roy    schedule 20.10.2015
comment
такой же как у меня :D - person Pankaj Parkar; 20.10.2015

У меня есть твоя проблема.

Вот исправленная версия вашего плунжера

Плункер

Вам нужно добавить две переменные scope в свой контроллер, чтобы использовать их как ваши ng-model.

Проблема со вторым выбором заключалась в том, что у него нет атрибута ng-model. Выберите должен иметь атрибут ng-model.

person Abhilash Augustine    schedule 20.10.2015