无法填充第二个 select 语句

Question

我有 2 个 select 语句，其中第一个 select 是由我的第一个网络服务请求填充的。用户select在第一个select中获取想要的数据，其中会触发onChange方法获取第一个select对象，运行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) 在 selecting 第一个 select 之后，值刚刚从 select 框中消失，但值（对象）成功传递给 onChange 函数

2) 无法填充第二个 select 框

我创建了一个 plunkr 来复制我的问题（没有网络服务）。谢谢！

Link: http://plnkr.co/edit/tqI0a83PiIHNUkKLj1WF?p=preview

Answer 1

From Docs

The select directive is used together with ngModel to provide data-binding between the scope and the <select> control (including setting default values).

此外，您需要更改第一个 select ng-model，因为 ng-repeat 正在进行 options 并且 ng-model 也与 [=15] 相同=]，应该改成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。

您的第二个 select 的问题是 它没有 ng-model 属性。 Select 必须具有 ng-model 属性。

无法填充第二个 select 语句

Unable to populate 2nd select statement

javascript

jquery

angularjs

ng-options

angularjs-ng-model