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 - ＆gt; "Men"

option2 - ＆gt; "Bottom wear"

第三级将是

option3 - ＆gt; ["M-Jeans","option2 - 3-2","option2 - 3-3"]

哪个好！

但请采取以下方案。

option1 - ＆gt; "Women"

option2 - ＆gt; "W-Bottom Wear"

第三级将是

option3 - ＆gt; ["M-Jeans","option2 - 3-2","option2 - 3-3"]

因此，您会看到数组需要采用不同的格式来获取不同的值。

我建议您为此创建一个array of objects。我们可以在哪里查找该数组的键并获取相同的值。请查看以下代码段，如果您遇到任何问题，请与我们联系。

＆＃13;

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];
  };
});

＆＃13;

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

＆＃13;

如何使用Angular Js动态填充3个下拉列表？

2 个答案: