无法填充第二个选择语句

Question

我有2个select语句,第一个选择由我的第一个webservice请求填充.用户在第一个选择中选择所需的数据,其中将触发onChange方法以检索第一个选择对象,再次运行webservice以检索另一组数据并填充第二个选择语句.

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)无法填充第二个选择框

我创建了一个plunkr来复制我的问题(没有webservice).谢谢!

链接:http: //plnkr.co/edit/tqI0a83PiIHNUkKLj1WF？p = preview

Answer 1

来自文档

select 指令与 一起使用，ngModel以提供范围和控件之间的数据绑定<select>（包括设置默认值）。

此外，您需要更改第一个选择ng-model，ng-repeat并且与 的选择相同，应将其更改为optionsng-modeloptionssomeOpetion

标记

<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>

普朗克