2015-05-27 43 views
0

在下拉列表中選擇我試圖創建動態地改變angularJS下拉列表動態地改變在角JS

angulars.js在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> 

我無法獲得第一個下拉列表數組的索引。 鍵值的值被指定爲-1,而選項2被指定爲未定義。 任何一個可以幫我這個

+0

有一些錯別字在代碼中的錯誤......你能創造一個plunkr或jsbin與您的代碼? (例子...你用數組數組來定義option20Options,並且在函數上,你嘗試獲得option20options [2]並且不存在) –

回答

0

我做了這個要求,一個小的解決方法,但它不是一個直接的答案,我相信這會幫助你...

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

$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"}];

0

有一個非常類似的問題。在車型方面,我發現我的方式圍繞它通過創建一個列表,而不是一個選擇選項

<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