Question

我有3 dropdowns，让我们说A,B,C。
当我从dropdown A中选择项目时，dropdown B被填充，因此c也被填充。（不像是级联阅读我的问题）
根据dropdown C项目选择，将填充更多下拉列表。对于前者如果我从option 1中选择dropdown c，则会填充3个下拉列表，如果我选择选项2，则会填充2个下拉列表。

所以，直到第2点我已经实现了，但在实施第3点时，我无法填充下拉列表。当我从dropdown c中选择任何选项时，将生成整个下拉列表。

var option1Options = ["Men", "women", "kids"];
var option2Options = [
  ["m-top", "m-bottom", "m-f0otwear"],
  ["w-top", "w-bottom", "w-footwear"],
  ["k-top", "k-bottom", "k-footwear"]
];
var option3Options = [
  ["m-Shirt", "m-t-shirt"],
  ["m-jeans", "m-trousers"],
  ["m-chapals", "m-formal shoes"],
  ["w-Shirt", "w-t-shirt"],
  ["w-jeans", "w-trousers"],
  ["w-chapals", "w-formal shoes"]

];

function myCtrl($scope) {
  $scope.opt1 = ["opt1", "opt2", "opt3"];
  $scope.opt2 = ["opt1", "opt2"];
  $scope.opt3 = ["opt1", "opt2"];
  $scope.opt4 = ["opt1", "opt2"];
  $scope.opt5 = ["opt1", "opt2"];
  $scope.opt6 = ["opt1", "opt2"];
  $scope.opt7 = ["opt1", "opt2"];
  $scope.opt8 = ["opt1", "opt2"];
  $scope.opt9 = ["opt1", "opt2"];
  $scope.opt10 = [];

  $scope.onOption3Change = function() {
    $scope.obj = {};

    $scope.selectC = $scope.options3.indexOf($scope.option3)

  }
  $scope.showDropDownOptions = [];
  $scope.showDropDownOptions[0] = [2, 3, 6];
  $scope.showDropDownOptions[1] = [1, 4];
  $scope.showDropDownOptions[2] = [5, 9, 10, 7];
  $scope.showDropDownOptions[3] = [8, 10];

  //$scope.second[0] = [1];
  $scope.obj = {};



  $scope.options1 = option1Options;
  $scope.options2 = []; // we'll get these later
  $scope.options3 = [];
  $scope.getOptions2 = function() {

    $scope.options2 = option2Options[option1Options.indexOf($scope.option1)];
    $scope.getOptions3();
  };

  $scope.getOptions3 = function() {
    var mergedOptions2 = [].concat.apply([], option2Options)
    $scope.options3 = option3Options[mergedOptions2.indexOf($scope.option2)];
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app data-ng-controller="myCtrl">
  <select data-ng-model="option1" data-ng-options="option for option in options1 " data-ng-change="getOptions2($index)">
  </select>
  <select data-ng-model="option2" data-ng-options="option for option in options2" data-ng-show='options2.length' data-ng-change="getOptions3()">
  </select>{{option2}}
  <select data-ng-model="option3" data-ng-options="option for option in options3" data-ng-show='options3.length' ng-change="onOption3Change()">
  </select>
  <hr>
  <select ng-if="showDropDownOptions[selectC].indexOf(1) != '-1' && selectC && opt1.length>0" ng-model="obj.selectedName245" ng-options="x for x in opt1">
  </select>
  <select ng-if="showDropDownOptions[selectC].indexOf(2) != '-1' && selectC && opt2.length>0" ng-model="obj.selectedName64" ng-options="x for x in opt2">
  </select>
  <select ng-if="showDropDownOptions[selectC].indexOf(3) != '-1' && selectC && opt3.length>0" ng-model="obj.selectedName321" ng-options="x for x in opt3">
  </select>
  <select ng-if="showDropDownOptions[selectC].indexOf(4) != '-1' && selectC && opt4.length>0" ng-model="obj.selectedName34" ng-options="x for x in opt4">
  </select>
  <select ng-if="showDropDownOptions[selectC].indexOf(5) != '-1' && selectC && opt5.length>0" ng-model="obj.selectedName21" ng-options="x for x in opt5">
  </select>
  <select ng-if="showDropDownOptions[selectC].indexOf(6) != '-1' && selectC && opt6.length>0" ng-model="obj.selectedName12" ng-options="x for x in opt6">
  </select>
  <select ng-if="showDropDownOptions[selectC].indexOf(7) != '-1' && selectC && opt7.length>0" ng-model="obj.selectedName222" ng-options="x for x in opt7">
  </select>
  <select ng-if="showDropDownOptions[selectC].indexOf(8) != '-1' && selectC && opt8.length>0" ng-model="obj.selectedName22" ng-options="x for x in opt8">
  </select>
  <select ng-if="showDropDownOptions[selectC].indexOf(9) != '-1' && selectC && opt9.length>0" ng-model="obj.selectedName2" ng-options="x for x in opt9">
  </select>
  <select ng-if="showDropDownOptions[selectC].indexOf(10) != '-1' && selectC && opt10.length>0" ng-model="obj.selectedNamelast" ng-options="x for x in opt10">
    <option>opt10</option>
  </select>

  Test Model: {{obj}}
</div>

See Fiddle here

Answer 1

你的问题在于这些行

sniff(opened_socket=L2ListenTcpdump())

在第三个下拉列表中，当您选择第一个选项<select ng-if="showDropDownOptions[selectC].indexOf(10) != '-1' && selectC && opt10.length>0" ng-model="obj.selectedNamelast" ng-options="x for x in opt10">时，selectC将设置为falsey value，这意味着0将使其成为选择将不会显示

您可以将其更改为&& selectC并将功能更改为

selectC != null

＆＃13;

$scope.getOptions3 = function() {
    $scope.selectC = null;
    var mergedOptions2 = [].concat.apply([], option2Options)
    $scope.options3 = option3Options[mergedOptions2.indexOf($scope.option2)];
}

＆＃13;

var option1Options = ["Men", "women", "kids"];
var option2Options = [
  ["m-top", "m-bottom", "m-f0otwear"],
  ["w-top", "w-bottom", "w-footwear"],
  ["k-top", "k-bottom", "k-footwear"]
];
var option3Options = [
  ["m-Shirt", "m-t-shirt"],
  ["m-jeans", "m-trousers"],
  ["m-chapals", "m-formal shoes"],
  ["w-Shirt", "w-t-shirt"],
  ["w-jeans", "w-trousers"],
  ["w-chapals", "w-formal shoes"]

];

function myCtrl($scope) {
  $scope.opt1 = ["opt1", "opt2", "opt3"];
  $scope.opt2 = ["opt1", "opt2"];
  $scope.opt3 = ["opt1", "opt2"];
  $scope.opt4 = ["opt1", "opt2"];
  $scope.opt5 = ["opt1", "opt2"];
  $scope.opt6 = ["opt1", "opt2"];
  $scope.opt7 = ["opt1", "opt2"];
  $scope.opt8 = ["opt1", "opt2"];
  $scope.opt9 = ["opt1", "opt2"];
  $scope.opt10 = [];

  $scope.onOption3Change = function() {
    $scope.obj = {};

    $scope.selectC = $scope.options3.indexOf($scope.option3)

  }
  $scope.showDropDownOptions = [];
  $scope.showDropDownOptions[0] = [2, 3, 6];
  $scope.showDropDownOptions[1] = [1, 4];
  $scope.showDropDownOptions[2] = [5, 9, 10, 7];
  $scope.showDropDownOptions[3] = [8, 10];

  //$scope.second[0] = [1];
  $scope.obj = {};



  $scope.options1 = option1Options;
  $scope.options2 = []; // we'll get these later
  $scope.options3 = [];
  $scope.getOptions2 = function() {

    $scope.options2 = option2Options[option1Options.indexOf($scope.option1)];
    $scope.getOptions3();
  };

  $scope.getOptions3 = function() {
    $scope.selectC = null;
    var mergedOptions2 = [].concat.apply([], option2Options)
    $scope.options3 = option3Options[mergedOptions2.indexOf($scope.option2)];
  }
}

＆＃13;

JSFiddle

无法使用角度js

1 个答案: