问题在基于选择前面的下拉列表中的下拉列表中的项目

问题描述:

我想在第二个下拉列表中根据前一个下拉列表中的项目选择来重新排列项目,每个项目都可以正常工作,但问题在于它没有更改父项下拉列表中的值,但会向其子项下拉列表中添加正确的值。问题在基于选择前面的下拉列表中的下拉列表中的项目

这里是我的动态下降的Html下来: -

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

这里是我的Java脚本代码: -

$scope.subjectSelectedId = []; 
 
\t \t \t \t \t $scope.subjectSelected = []; 
 
\t \t \t \t \t $scope.initSelection = function(index, item) { 
 
\t \t \t \t \t \t $scope.subjectSelected.push(item); 
 
\t \t \t \t \t \t $scope.subjectSelectedId.push(''); 
 
\t \t \t \t \t } 
 
\t \t \t \t \t 
 
\t \t \t \t \t var UserSelectedArr = []; 
 
\t \t \t \t \t var isSelectedFirstTime = true; 
 
\t \t \t \t \t var btatrue = false; 
 
\t \t \t \t \t var dummyArr = []; 
 
\t \t \t \t \t $scope.selectedSize = function(value, attributeId) { 
 
\t \t \t \t \t \t var Sizedata = angular.fromJson(value); 
 
\t \t \t \t \t \t var sizedataArray = []; 
 
\t \t \t \t \t \t sizedataArray.push(Sizedata); 
 

 
\t \t \t \t \t \t if (dummyArr.length > 0) { 
 
\t \t \t \t \t \t \t check(sizedataArray, dummyArr); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t function check(sizedataArray, dummyArr) { 
 
\t \t \t \t \t \t \t angular.forEach(sizedataArray, function(value1, 
 
\t \t \t \t \t \t \t \t \t key1) { 
 
\t \t \t \t \t \t \t \t angular.forEach(dummyArr, 
 
\t \t \t \t \t \t \t \t \t \t function(value2, key2) { 
 
\t \t \t \t \t \t \t \t \t \t \t alert("dummyArr" + value2.id + " " 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t + "Sizedata" + value1.id); 
 
\t \t \t \t \t \t \t \t \t \t \t if (value1.id === value2.id) { 
 

 
\t \t \t \t \t \t \t \t \t \t \t \t btatrue = true; 
 
\t \t \t \t \t \t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t \t \t \t \t \t btatrue = false; 
 
\t \t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t \t \t }); 
 
\t \t \t \t \t \t \t }); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (btatrue) { 
 
\t \t \t \t \t \t \t return; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t $scope.configurableDataList = LocalStorage 
 
\t \t \t \t \t \t \t \t .getObject("configurableDataListFull"); 
 

 
\t \t \t \t \t \t for (var i = 0; i < $scope.configurableDataList.length; i++) { 
 
\t \t \t \t \t \t \t if (attributeId != $scope.configurableDataList[i].id) { 
 
\t \t \t \t \t \t \t \t if (dummyArr.length > 0) { 
 
\t \t \t \t \t \t \t \t \t dummyArr = []; 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t for (var j = 0; j < Sizedata.products.length; j++) { 
 
\t \t \t \t \t \t \t \t \t for (var k = 0; k < $scope.configurableDataList[i].options.length; k++) { 
 
\t \t \t \t \t \t \t \t \t \t for (var l = 0; l < $scope.configurableDataList[i].options[k].products.length; l++) { 
 
\t \t \t \t \t \t \t \t \t \t \t alert(JSON 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t .stringify(Sizedata.products[j])); 
 
\t \t \t \t \t \t \t \t \t \t \t alert(JSON 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t .stringify($scope.configurableDataList[i].options[k].products[l])); 
 
\t \t \t \t \t \t \t \t \t \t \t if (Sizedata.products[j] == $scope.configurableDataList[i].options[k].products[l]) { 
 
\t \t \t \t \t \t \t \t \t \t \t \t dummyArr 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t .push($scope.configurableDataList[i].options[k]); 
 
\t \t \t \t \t \t \t \t \t \t \t \t $scope.configurableDataList[i].options = dummyArr; 
 

 
\t \t \t \t \t \t \t \t \t \t \t \t alert("check :" 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t + JSON 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t .stringify($scope.configurableDataList[i].options)); 
 
\t \t \t \t \t \t \t \t \t \t \t \t return; 
 
\t \t \t \t \t \t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t \t \t \t \t \t alert("chak 250 :") 
 
\t \t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t \t \t console.log('dummyArr :', dummyArr); 
 

 
\t \t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t \t if (isSelectedFirstTime) { 
 
\t \t \t \t \t \t \t \t \t console.log('abc'); 
 
\t \t \t \t \t \t \t \t \t UserSelectedArr = $scope.configurableDataList[i].options; 
 
\t \t \t \t \t \t \t \t \t isSelectedFirstTime = false; 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t }

这里我的json: - http://piratepad.net/ep/pad/view/ro.5GeXFI9Xy2P/latest

我需要的是,当我选择黑色时,其他显示下拉列表仅包含基于条件的情况下的对应于黑色的情况,即“S”即小,并且在蓝色的情况下显示“XL”虽然它的工作正常,但是当我选择黑色时,它始终显示我在父级下拉菜单中显示为蓝色,但我的孩子下拉菜单中却获取了“S”。问题是,如何让父级下拉选择黑色。

我试图让闯入者,因为我是新的,我不能..但我把所有需要的代码在里面。

总之,请提供给我的方式来获得$指数: -

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

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

我用下面的方法试过,但它不提供我在孩子对应的选项下拉: -

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

而且具有: -

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

任何帮助将不胜感激

感谢

菲娜LLY我做了..我解决它通过使用NG选项: -

这里是我的解决方案: -

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