Question

我尝试在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，而option2被指定为未定义。任何人都可以帮助我

Answer 1

我为这个要求做了一个小的解决方法，虽然这不是一个直接的答案，我相信这会对你有所帮助......

将此添加到您的控制器......

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

并更改您的getOptions2函数，如下所示

$scope.getOptions2 = function(){
        $scope.options2 =  option2Options[getOptions1Idx()];
    };

如果您选择使用预定义索引更改数组结构，例如var option1Options = [{id:0,option:"Class"},{id:1,option:"Category"},{id:2,option:"Option"},{id:3,option:"Question","Group"}];

，可以通过避免for循环来更好地完成此操作

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

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

http://plnkr.co/edit/nwXmMif8vjj92pQmalb2

以角度js动态更改下拉列表中的选项

2 个答案: