无法使用angular js按正确的顺序填充下拉列表

Question

• I have 3 dropdowns , lets say A,B,C .
• When I select item from dropdown A , then dropdown B is filled, and accordingly c is also filled. (not like cascading read my question fully)
• Based on the dropdown C item selection, more dropdowns will be populated. For ex. if i select option 1 from dropdown c , then 3 dropdowns will be populated, if I select option 2, then 2 dropdowns will be populated.

So, till point 2 I have achieved, but while implementing point 3 , I am not able to populate dropdowns. When I select any option from dropdown c , then entire dropdowns are getting generated.

 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", "mt-shirt"], ["m-jeans", "m-trousers"], ["m-chapals", "m-formal shoes"], ["w-Shirt", "wt-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

Your problem is with these lines

<select ng-if="showDropDownOptions[selectC].indexOf(10) != '-1' && selectC && opt10.length>0" ng-model="obj.selectedNamelast" ng-options="x for x in opt10">

On the third dropdown, when you select the first option selectC will be set to 0 which is a falsey value meaning the && selectC will make it so that the select will not be shown

you can change this to be selectC != null and change the function to be

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

 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", "mt-shirt"], ["m-jeans", "m-trousers"], ["m-chapals", "m-formal shoes"], ["w-Shirt", "wt-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)]; } } 

 <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 != null && opt1.length>0 " ng-model="obj.selectedName245" ng-options="x for x in opt1"> </select> <select ng-if="showDropDownOptions[selectC].indexOf(2) != '-1' && selectC != null && opt2.length>0" ng-model="obj.selectedName64" ng-options="x for x in opt2"> </select> <select ng-if="showDropDownOptions[selectC].indexOf(3) != '-1'&& selectC != null && opt3.length>0" ng-model="obj.selectedName321" ng-options="x for x in opt3"> </select> <select ng-if="showDropDownOptions[selectC].indexOf(4) != '-1' && selectC != null && opt4.length>0" ng-model="obj.selectedName34" ng-options="x for x in opt4"> </select> <select ng-if="showDropDownOptions[selectC].indexOf(5) != '-1' && selectC != null && opt5.length>0" ng-model="obj.selectedName21" ng-options="x for x in opt5"> </select> <select ng-if="showDropDownOptions[selectC].indexOf(6) != '-1' && selectC != null && opt6.length>0" ng-model="obj.selectedName12" ng-options="x for x in opt6"> </select> <select ng-if="showDropDownOptions[selectC].indexOf(7) != '-1' && selectC != null && opt7.length>0" ng-model="obj.selectedName222" ng-options="x for x in opt7"> </select> <select ng-if="showDropDownOptions[selectC].indexOf(8) != '-1' && selectC != null && opt8.length>0" ng-model="obj.selectedName22" ng-options="x for x in opt8"> </select> <select ng-if="showDropDownOptions[selectC].indexOf(9) != '-1' && selectC != null && opt9.length>0" ng-model="obj.selectedName2" ng-options="x for x in opt9"> </select> <select ng-if="showDropDownOptions[selectC].indexOf(10) != '-1' && selectC != null && opt10.length>0" ng-model="obj.selectedNamelast" ng-options="x for x in opt10"> <option>opt10</option> </select> Test Model: {{obj}} </div> 

JSFiddle