如何使用Angular Js動態填充3個下拉列表？

Question

我使用角JS
基於第一下拉選擇填充3下拉列表，第二下拉將填補，並基於所述第二下拉第三滴下來將填補。

HTML

<div ng-app ng-controller="myCtrl"> 
    <select ng-model="option1" ng-options="option for option in options1" ng-change="getOptions2()"> 
    </select> 
    <select ng-model="option2" ng-options="option for option in options2" ng-change="getOptions3()"> 
    </select> 
    <select ng-model="option3" ng-options="option for option in options3"> 
    </select> 
</div> 

控制器

var option1Options = ["Men", "Women", "Kids"]; 
var option2Options = [["Top wear","Bottom wear","Blazers"], 
       ["W-Top Wear","W-Bottom Wear","W-Blazers"], 
       ["K-Top wear","K-Bottom wear","K-others"]]; 
var option3Options = [["M-Tshirts","M-Casula Shirts","option2 - 3-3"], 
       ["M-Jeans","option2 - 3-2","option2 - 3-3"], 
       ["M-Blazers","option2 - 3-2","option2 - 3-3"], 
       ["w-Tshirts","w-Casula Shirts","w-option2 - 3-3"]]; 

function myCtrl($scope){ 
    $scope.options1 = option1Options; 
    $scope.options2 = []; 
    $scope.options3 = []; 

    $scope.getOptions2 = function(){ 
     var key = $scope.options1.indexOf($scope.option1); 
     var myNewOptions = option2Options[key]; 

     $scope.options2 = myNewOptions; 
    }; 

    $scope.getOptions3 = function(){ 

     var key = $scope.options2.indexOf($scope.option2); 
     var myNewOptions = option3Options[key]; 

     $scope.options3 = myNewOptions; 
    }; 
} 

小提琴鏈接：http://jsfiddle.net/mayankBisht/Xku9z/513/
問題

• 當我試圖填補與女性的選擇第三個下拉，它仍然顯示男士的選擇。
  請幫忙。

Answer 1

您的綁定dropdownlist的概念是這裏的問題。你寧願使用對象數組而不是普通數組。你不能以這種方式正確地映射映射。

Answer 2

您提供的代碼適用於前兩個級別。但這是第三級失敗的場景。

您已經在第三級指定了4個數組，但在第二級中的單個數組內只有3個元素，因此第三級的第四個數組是不可訪問的。

其次，對於第一級，您使用元素的索引來獲取相應的列表。但問題是第三層面很複雜。我的意思是說。

如果用戶選擇

option1 - >"Men"

option2 - >"Bottom wear"

第三級將是

option3 - >["M-Jeans","option2 - 3-2","option2 - 3-3"]

這很好！

但採取下面的情況。

option1 - >"Women"

option2 - >"W-Bottom Wear"

第三級將是

option3 - >["M-Jeans","option2 - 3-2","option2 - 3-3"]

所以你看到陣列需要格式不同的獲得不同值。

我建議你爲此創建一個array of objects。我們可以在哪裏查找該數組的關鍵字並獲取相同的值。請查看下面的代碼段，並讓我知道你是否面臨任何問題。

var app = angular.module('myApp', []); 
 
var option1Options = ["Men", "Women", "Kids"]; 
 
var option2Options = [ 
 
    ["Top wear", "Bottom wear", "Blazers"], 
 
    ["W-Top Wear", "W-Bottom Wear", "W-Blazers"], 
 
    ["K-Top wear", "K-Bottom wear", "K-others"] 
 
]; 
 
var option3Options = [{ 
 
    "Top wear": ["M-Tshirts", "M-Casula Shirts", "option2 - 3-3"] 
 
}, { 
 
    "Bottom wear": ["mens bottom wear here"] 
 
}, { 
 
    "Blazers": ["mens Blazers here"] 
 
}, { 
 
    "W-Top Wear": ["w-Tshirts", "w-Casula Shirts", "w-option2 - 3-3"] 
 
}, { 
 
    "W-Bottom Wear": ["womens bottom wear here"] 
 
}, { 
 
    "W-Blazers": ["womens blazers here"] 
 
}, { 
 
    "K-Top wear": ["K-Tshirts", "K-Casula Shirts", "option2 - 3-3"] 
 
}, { 
 
    "K-Bottom wear": ["kids bottom wear here"] 
 
}, { 
 
    "K-others": ["K-others here"] 
 
}]; 
 
app.controller('MyController', function MyController($scope) { 
 
    $scope.options1 = option1Options; 
 
    $scope.options2 = []; 
 
    $scope.options3 = []; 
 

 
    $scope.getOptions2 = function() { 
 
    var key = $scope.options1.indexOf($scope.option1); 
 
    var myNewOptions = option2Options[key]; 
 

 
    $scope.options2 = myNewOptions; 
 
    $scope.options3 = []; 
 
    }; 
 

 
    $scope.getOptions3 = function() { 
 

 
    var myNewOptions = option3Options.filter(function(x) { 
 
     return x[$scope.option2] !== undefined; 
 
    }) 
 
    $scope.options3 = myNewOptions[0][$scope.option2]; 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-controller='MyController' ng-app='myApp'> 
 
    <select ng-model="option1" ng-options="option for option in options1" ng-change="getOptions2()"> 
 
    </select> 
 
    <select ng-model="option2" ng-options="option for option in options2" ng-change="getOptions3()"> 
 
    </select> 
 
    <select ng-model="option3" ng-options="option for option in options3"> 
 
    </select> 
 
</div>