基于以前的下拉Angularjs的选择在下拉列表中混排项目的问题

Question

I am trying to shuffles items in second drop down based on the selection of item in previous drop down , every thing is working fine but the problem is it do not change value in parent drop down but adds correct value to its child drop down.

here is my Html for dynamic drop down :-

 <div class="row" > <div class="col col-100 prod_det"> <div class="desc select_prod"> <div class="prod_col"> <div class="col_list cont_padd" ng-repeat="item in configurableDataList"> <label class="item item-input item-select"> <div class="input-label"> <b>{{item.label}}</b> </div> <select id = "sel" class="form-control input-lg" ng-init="initSelection($index,item)" ng-model="subjectSelectedId[$index]" required="required" ng-change="selectedSize(subjectSelectedId[$index],item.id )"> <option ng-repeat="option in item.options" selected="selected" value="{{option}}">{{option.label}}</option> <option value="" disabled hidden>select</option> </select> </label> </div> </div> </div> </div> </div> 

Here is my java script code :-

 $scope.subjectSelectedId = []; $scope.subjectSelected = []; $scope.initSelection = function(index, item) { $scope.subjectSelected.push(item); $scope.subjectSelectedId.push(''); } var UserSelectedArr = []; var isSelectedFirstTime = true; var btatrue = false; var dummyArr = []; $scope.selectedSize = function(value, attributeId) { var Sizedata = angular.fromJson(value); var sizedataArray = []; sizedataArray.push(Sizedata); if (dummyArr.length > 0) { check(sizedataArray, dummyArr); } function check(sizedataArray, dummyArr) { angular.forEach(sizedataArray, function(value1, key1) { angular.forEach(dummyArr, function(value2, key2) { alert("dummyArr" + value2.id + " " + "Sizedata" + value1.id); if (value1.id === value2.id) { btatrue = true; } else { btatrue = false; } }); }); } if (btatrue) { return; } $scope.configurableDataList = LocalStorage .getObject("configurableDataListFull"); for ( var i = 0; i < $scope.configurableDataList.length; i++) { if (attributeId != $scope.configurableDataList[i].id) { if (dummyArr.length > 0) { dummyArr = []; } for ( var j = 0; j < Sizedata.products.length; j++) { for ( var k = 0; k < $scope.configurableDataList[i].options.length; k++) { for ( var l = 0; l < $scope.configurableDataList[i].options[k].products.length; l++) { alert(JSON .stringify(Sizedata.products[j])); alert(JSON .stringify($scope.configurableDataList[i].options[k].products[l])); if (Sizedata.products[j] == $scope.configurableDataList[i].options[k].products[l]) { dummyArr .push($scope.configurableDataList[i].options[k]); $scope.configurableDataList[i].options = dummyArr; alert("check :" + JSON .stringify($scope.configurableDataList[i].options)); return; } else { alert("chak 250 :") } } } } console.log('dummyArr :', dummyArr); } else { if (isSelectedFirstTime) { console.log('abc'); UserSelectedArr = $scope.configurableDataList[i].options; isSelectedFirstTime = false; } } } 

Here is my json :- http://piratepad.net/ep/pad/view/ro.5GeXFI9Xy2P/latest

what i need is that when i select black the other show dropdown contain only value corresponding to black based on condition which in case is "S" ie small and in case of blue shows me "XL".Although its working fine but when i select black then it always shows me blue in parent dropdown but my child drop down do acquire "S" in it.The problem is that how can i make parent drop down select black.

I tried to make plunker as i am new i am not able to ..but i put all the required code in it.

In short please provide me way to get $index in :-

 <option ng-repeat="option in item.options" selected="selected" value="{{option}}">{{option.label}}</option> 

plunker :- http://plnkr.co/edit/PUKaIRUApSQu4qLqtD2e?p=preview

I tried with following approach but its does not provide me corresponding option in child drop down :-

  selected="selected" ng-options="item.options.indexOf(subjectSelectedId[$index]) as subjectSelectedId[$index] for subjectSelectedId[$index] in item.options"> <option value="" disabled hidden>select</option> 

And with :-

 <option ng-selected="subjectSelectedId[$parent.$index] == option.label" ng-repeat="option in item.options" value="{{option}}" selected="selected">{{option.label}}</option> <option value="" disabled hidden>select</option> 

Any help will be appreciated

Thanks

Answer 1

Finally I am done ..I solved it by using ng-options :-

Here is my solution :-

 <select class="form-control input-lg" ng-init="initSelection($index,item)" ng-model="subjectSelectedId[$index]" required="required" ng-change="selectedSize(subjectSelectedId[$index],item.id )" ng-selected="subjectSelectedId[$parent.$index] == option.id" ng-options="option.label for option in item.options track by option.id"> <option value="" disabled hidden>Please select</option> </select>