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

使用此代码：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 2

From Docs

select指令与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>

<强>标记

{{1}}

Plunker

Answer 3

我遇到了你的问题。

以下是您的plunker的固定版本

Plunker

您需要在控制器中添加两个scope变量，才能将这些变量用作ng-model。

第二次选择的问题是它没有ng-model属性。选择必须具有ng-model属性。

无法填充第二个选择语句

3 个答案: