Question

我有两个下拉列表.with JSON数据

<select class="form control" ng-model="fruitsName" ng-options="r.id as r.name for r in fruits">
<option value="">--Select---</option></select>

$scope.fruits = [{'id': 'AL', 'name': 'Apple'},{'id': 'FL', 'name': 'Orange'},{'id': 'CA', 'name': Mango'},{'id': 'DE', 'name': 'PineApple'}];

 <select class="form control" ng-model="sellerName" ng-options="r.id as r.name for r in seller">
<option value=""></option></select>

$scope.seller = [{'id': 'AL', 'name': 'John'},{'id': 'FL', 'name': 'Miller'},{'id': 'CA', 'name': 'Jack'},{'id': 'DE', 'name': 'Smith'}];

我的要求：如果我在第一个下拉列表中选择一个项目，那么第二个选择下拉列表应该使用其第一个项目自动填充，反之亦然。

任何帮助都会非常苛刻。谢谢

Answer 1

编辑第一个ng-options，如下所示

<select class="form control" ng-model="fruitsName" ng-options="r as r.name for r in fruits" ng-change="selectSecond()">
<option value="">--Select---</option>

控制器内的

 $scope.selectSecond = function(obj) {
     var selected = $scope.fruitsName;
     var index = $scope.fruits.indexOf(selected);
     $scope.selectedFroutIndex = index;

     $scope.sellerName = $scope.seller[$scope.selectedFroutIndex].id;    
}

这是演示Plunker

如果您对更改ng-options

不感兴趣

 <select class="form control" ng-model="fruitsName" ng-options="r.id as r.name for r in fruits" ng-change="selectSecond()">
     <option value="">--Select---</option>
 </select>

然后你的控制器应该像

$scope.selectSecond = function() {
    var selected = $scope.fruitsName;
    var index = -1;
    angular.forEach($scope.fruits , function(value, key) {
      if(value.id === selected) {
        index = key;
       return;
      }
    })
    $scope.selectedFroutIndex = index;
    $scope.sellerName = $scope.seller[$scope.selectedFroutIndex].id;
}

这是演示Plunker

如果你需要反之亦然

这是演示Plunker

在角度js中在两个选择下拉之间切换

1 个答案: