Unable to populate dropdowns in correct sequence using 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", "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

@Vinoth , I have shared fiddle link, you can find code there :) 'http://jsfiddle.net/mayankBisht/r2w0yp6d/5/' — mayank bisht, Dec 04 '17 at 09:27

score 0 · Answer 1 · answered Dec 04 '17 at 09:38

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

<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

Thanks for the answer, it's working, but i guess, i have gone a wrong way while implementing category,sub-category,sub-sub-sub category and attributes. :( — mayank bisht, Dec 04 '17 at 09:48
When I select options from dropdown C, then always I am getting same options no matter what.My actual intention is suppose i select `option 1` from `A`, option 1 from `B`, option 3 from `dropdown c`, then `$scope.opt1 = ["opt1", "opt2", "opt3"];` should execute, similarly I am expecting same . — mayank bisht, Dec 04 '17 at 09:58

Unable to populate dropdowns in correct sequence using angular js

1 Answers1