Angularjs 动态更改angular js中下拉列表中的选项

我尝试在angularJS中创建动态变化的下拉列表

angulars.js

 var option1Options = ["Class","Category","Option","Question","Group"];
 var option2Options = [["Group","ProductModel"],
                      ["Class","ProductModel"],
                      ["Class","Group","ProductModel"],
                      ["Group","ProductModel"],
                      ["ProductModel"]];
 $scope.myCtrl= function()
 {
    $scope.options1 = option1Options;
    $scope.options2 = []; 
    $scope.getOptions2 = function(){
        var key = $scope.options1.indexOf($scope.child);
        $scope.options2 =  option2Options[2];
    };
  }

page.html

 <div   id="CreateChild"  ng-controller="myCtrl">
 <select ng-model="child" ng-options="option for option in options1"  ng-change="getOptions2()">
 </select>
 <select ng-model="parent" ng-options="option for option in options2">
 </select>
 </div>

在angulars.js中，我无法获取第一个下拉列表数组的索引。键的值被指定为-1，选项2被指定为未定义。

---

有人能帮我解决这个问题吗？

我为这个要求做了一些变通，虽然这不是一个直截了当的答案，但我相信这会帮助你

将此添加到您的控制器

$scope.getOptions1Idx = function(){
   var mySelectedOption = $scope.child;
   var i = 0;
   for(i=0;i< option1Options.length;i++){
        if(option1Options[i]==mySelectedOption){
          break;
        }
   }
   return i;
}

---

如果您选择使用预定义索引更改数组结构，则可以通过避免提供for循环来更好地实现这一点，例如var option1Options=[{id:0，option:Class}，{id:1，option:Category}，{id:2，option:option}，{id:3，option:Question，Group}]

也有类似的问题。在样式方面，我通过创建列表而不是选择选项找到了解决方法

<div class='btn-group'>
   <button class='form-control col-md-3' data-toggle='dropdown'>
      {{value}} <span class='caret'></span>
   </button>
   <ul class='dropdown-menu'>
      <li ng-repeat='type in callType' class='col-md-3'>
        <a href='#' ng-click='select(type)'>{{type.name}}</a>
      </li>
   </ul>
 </div>

然后使用控制器接收对象，调用方法更改每个对象，然后为下拉列表设置默认值。你可以在下面的链接中看到它

---

您的代码中有一些打字错误。。。你能用你的代码创建一个plunkr或jsbin吗？实例使用数组的数组定义option20Options，在函数中，尝试获取option20Options[2]不存在

<div class='btn-group'>
   <button class='form-control col-md-3' data-toggle='dropdown'>
      {{value}} <span class='caret'></span>
   </button>
   <ul class='dropdown-menu'>
      <li ng-repeat='type in callType' class='col-md-3'>
        <a href='#' ng-click='select(type)'>{{type.name}}</a>
      </li>
   </ul>
 </div>