如何动态填充3个下拉列表，使用角Js？
如何动态填充3个下拉列表，使用角Js？
提问于 2017-10-08 06:28:05
我正在使用角js填充下拉列表
基于第一个下拉选择，第二个下拉将填充，而基于第二个下拉第三个下拉将填充。
<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;
};
} Fiddle Link：http://jsfiddle.net/mayankBisht/Xku9z/513/
问题
- 当我试图用女人的选择来填充第三次下降的时候，它仍然在显示男人的选择。 请帮帮忙。
回答 2
Stack Overflow用户
发布于 2017-10-08 07:10:15
您的绑定下拉列表的概念就是这里的问题。您宁愿使用对象数组而不是普通数组。您无法以这种方式正确地进行映射。
Stack Overflow用户
发布于 2017-10-08 08:08:54
您提供的代码适用于前两个级别。但是这里有一个第三层失败的场景。
您已经在第3层中指定了4个数组，但是在第二级的单个数组中只有3个元素，因此第3层的第4个数组是不可访问的。
其次，对于第一级，使用元素的索引来获取相应的列表。但问题是，第三层是复杂的。我的意思是。
如果用户选择
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46628160
复制相关文章
相似问题
腾讯云开发者
