Невозможно заполнить 2-ю инструкцию select

у меня есть оператор 2 select, который первый select заполняется моим первым запросом webservice. Пользователь выбирает нужные данные в первом select, в котором вызовет метод onChange для получения первого объекта select, снова запустите webservice для получения другого набора данных и заполните 2-ю инструкцию 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) После выбора 1-го выбора , стоимость исчезает из поля выбора, но значение (объект) успешно передается функции onChange

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

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

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

6
angularjs angularjs-ng-model javascript jquery ng-options

3 ответов

Из Docs

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

кроме того, вам нужно изменить 1st select ng-model as 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

1

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

  <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. Но!--5--> должен ng-model.

2

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

вот фиксированная версия вашего plunker

Plunker

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

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

1