Не удалось заполнить инструкцию 2-го выбора

Question

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

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) После выбора первого выбора, значение просто исчезает из поля выбора, но значение (объект) успешно передается функции onChange

2) Не удается выполнить заполнить 2-й поле выбора

Я создал plunkr для репликации моей проблемы (без веб-сервиса). Благодаря!

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

Answer 1

From Docs

ВЫБРАТЬ директива используется вместе с ngModel для обеспечения связывания данных между областью применения и <select> контроля (в том числе значений по умолчанию).

Кроме того, вы должны изменить первый выбрать 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> 

Plunker

Answer 2

использовать этот код: 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.

Answer 3

У меня возникли проблемы.

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

Plunker

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

Вопрос для вашего второго выбора был у него нет ng-model атрибут. Выбранный атрибут должен иметь атрибут ng-model.