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

Question

我正在使用Angular 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

您的綁定下拉列表的概念就是這里的問題。 您寧願使用對象數組而不是普通數組。 您不能以這種方式正確地進行映射。

Answer 2

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

您在第3層中指定了4個數組，但在第2層中的各個數組中僅指定了3個元素，因此無法訪問第3層的第4個數組。

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

如果用戶選擇

option1 > "Men"

option2 > "Bottom wear"

第三級將是

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

沒關系！

但是，請采取以下情形。

option1 > "Women"

option2 > "W-Bottom Wear"

第三級將是

option3 > ["M-Jeans","option2 - 3-2","option2 - 3-3"] option3 ["M-Jeans","option2 - 3-2","option2 - 3-3"] 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>