Handling Динамические выпадающий тот же данные

Question

у меня есть 2 выпадающих из которых скрыт 1 выпадающих которые будут показаны после выбора опции из первого окна выбора

HTML КОД:

<div ng-repeat="choice in exSize"> 
      <label>Attribute {{$index+1}} </label> 
      <div id="select"> 
       <select ng-model="choice.attributeid" ng-options = "a.attributeid as a.attributename for a in modifyList" ng-change="changeSelect(choice.attributeid)" class="minimal" required> 
       <option value="">Please Select An Attrtibute</option> 
       </select> 
       <label class="extra"><span class="plusCircle"><span id="addTaxBtn" ng-click="addSize($index)">+</span></span> Add Attribute<span ng-hide="exSize.length==1">/</span></label> 
       <label class="extra extra_remove" ng-hide="exSize.length==1"><span class="plusCircle"><span id="addTaxBtn" ng-click="rmSize($index)">-</span></span> Remove</label> 
      </div> 
      <!-- &&&& ng-if="choice.attributeid" &&&& --> 
      <!-- <div ng-repeat="(index1,sub) in subSize" ng-if="choice.attributeid"> --> 
      <div ng-repeat="sub in afterChangeAttr"> 
       <div id="select" ng-if="choice.attributeid"> 
       <div> 
        <div ng-show="afterChangeAttr.length ==1"> 
        <select ng-model="sub.values" ng-options="v.attributevalue as v.attributevalue for v in hasArr" style="width:17%;margin-top:10px;"> 
         <option value="">Select</option> 
        </select> 
        <input type="text" ng-model="sub.attributeprice" style="width:35%;" name="subAttr" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/"> 
        <label class="extra"><span class="plusCircle"><span id="addTaxBtn" ng-click="addSubSize(choice.attributeid)">+</span></span> Add<span ng-hide="afterChangeAttr.length==1 ||afterChangeAttr.length==5">/</span></label> 
        <label class="extra extra_remove" ng-hide="afterChangeAttr.length==1"><span class="plusCircle"><span id="addTaxBtn" ng-click="rmSubSize($index)">-</span></span> Remove</label> 
        </div> 
        <div ng-show="afterChangeAttr.length ==2"> 
        <select ng-model="sub.values" ng-options="v.attributevalue as v.attributevalue for v in hasArr" style="width:17%;margin-top:10px;"> 
         <option value="">Select</option> 
        </select> 
        <input type="text" ng-model="sub.attributeprice" style="width:35%;" name="subAttr" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/"> 
        <label class="extra"><span class="plusCircle"><span id="addTaxBtn" ng-click="addSubSize(choice.attributeid)">+</span></span> Add<span ng-hide="afterChangeAttr.length==1">/</span></label> 
        <label class="extra extra_remove" ng-hide="afterChangeAttr.length==1"><span class="plusCircle"><span id="addTaxBtn" ng-click="rmSubSize($index)">-</span></span> Remove</label> 
        </div> 
        <div ng-show="afterChangeAttr.length ==3"> 
        <select ng-model="sub.values" ng-options="v.attributevalue as v.attributevalue for v in hasArr" style="width:17%;margin-top:10px;"> 
         <option value="">Select</option> 
        </select> 
        <input type="text" ng-model="sub.attributeprice" style="width:35%;" name="subAttr" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/"> 
        <label class="extra"><span class="plusCircle"><span id="addTaxBtn" ng-click="addSubSize(choice.attributeid)">+</span></span> Add<span ng-hide="afterChangeAttr.length==1">/</span></label> 
        <label class="extra extra_remove" ng-hide="afterChangeAttr.length==1"><span class="plusCircle"><span id="addTaxBtn" ng-click="rmSubSize($index)">-</span></span> Remove</label> 
        </div> 
        <div ng-show="afterChangeAttr.length ==4"> 
        <select ng-model="sub.values" ng-options="v.attributevalue as v.attributevalue for v in hasArr" style="width:17%;margin-top:10px;"> 
         <option value="">Select</option> 
        </select> 
        <input type="text" ng-model="sub.attributeprice" style="width:35%;" name="subAttr" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/"> 
        <label class="extra"><span class="plusCircle"><span id="addTaxBtn" ng-click="addSubSize(choice.attributeid)">+</span></span> Add<span ng-hide="afterChangeAttr.length==1">/</span></label> 
        <label class="extra extra_remove" ng-hide="afterChangeAttr.length==1"><span class="plusCircle"><span id="addTaxBtn" ng-click="rmSubSize($index)">-</span></span> Remove</label> 
        </div> 
        <div ng-show="afterChangeAttr.length ==5"> 
        <select ng-model="sub.values" ng-options="v.attributevalue as v.attributevalue for v in hasArr" style="width:17%;margin-top:10px;"> 
         <option value="">Select</option> 
        </select> 
        <input type="text" ng-model="sub.attributeprice" style="width:35%;" name="subAttr" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/"> 
        <label class="extra"><span class="plusCircle"><span id="addTaxBtn" ng-click="addSubSize(choice.attributeid)">+</span></span> Add<span ng-hide="afterChangeAttr.length==1">/</span></label> 
        <label class="extra extra_remove" ng-hide="afterChangeAttr.length==1"><span class="plusCircle"><span id="addTaxBtn" ng-click="rmSubSize($index)">-</span></span> Remove</label> 
        </div> 
       </div> 
       <div ng-messages="addMenu.subAttr.$error" class="error" role="alert" ng-if="addMenu.subAttr.$dirty"> 
       <div ng-message="pattern">Please Enter Only Numbers</div> 
        <div ng-message="required">Sales Price Is Mandatory</div> 
       </div> 
       </div> 
      </div> 
      </div> 

ANGULAR КОД:

$scope.hasArr = []; 
$scope.hasArr1 = []; 
$scope.hasArr2 = []; 
$scope.hasArr3 = []; 
$scope.hasArr4 = []; 
$scope.changeSelect = function(id){ 
    $scope.sizeId = id; 
    angular.forEach($scope.modifyList,function(key,value){ 
     if(key.attributeid === id){ 
      for (var i = 0; i < key.attribuevaluelist.length; i++) { 
       $scope.hasArr[i]= key.attribuevaluelist[i].attributevalue; 
       $scope.hasArr1[i]= key.attribuevaluelist[i].attributevalue; 
       $scope.hasArr2[i]= key.attribuevaluelist[i].attributevalue; 
       $scope.hasArr3[i]= key.attribuevaluelist[i].attributevalue; 
       $scope.hasArr4[i]= key.attribuevaluelist[i].attributevalue; 
      }; 
     } 
    }) 
    /*for (var i = 0; i < $scope.exSize.length; i++) { 
     if($scope.exSize.length == 1){ 
      console.log('inside if'); 
      $scope.hasArr[1] = $scope.hasArr; 
     } 
     if($scope.exSize.length == 2){ 
      console.log('inside 2nd if'); 
      $scope.hasArr1[i] = $scope.hasArr1; 
      console.log($scope.hasArr1); 
     } 
    };*/ 
    for (var i = 0; i < $scope.exSize.length; i++) { 
     if($scope.exSize.length==1){ 
      $scope.hasArr = $scope.modifyList[i].attribuevaluelist; 
     } 
     if($scope.exSize.length ==2){ 
      $scope.hasArr1 = $scope.modifyList[1].attribuevaluelist; 
     } 
     if($scope.exSize.length == 3){ 
      $scope.hasArr2 = $scope.modifyList[2].attribuevaluelist; 
     } 
     if($scope.exSize.length == 4){ 
      $scope.hasArr3 = $scope.modifyList[3].attribuevaluelist; 
     } 
     if($scope.exSize.length == 5){ 
      $scope.hasArr4 = $scope.modifyList[4].attribuevaluelist; 
     } 
    }; 
    /*console.log($scope.hasArr); 
    console.log($scope.hasArr1); 
    console.log($scope.hasArr2); 
    console.log($scope.hasArr3); 
    console.log($scope.hasArr4);*/ 
} 
$scope.addSize = function(index){ 
    /*$scope.choiceArr.push($scope.choice); 
    $scope.subSizeArr.push($scope.subSize); 
    $scope.finalArr.push({"attributeid":$scope.choiceArr,"attributevaluelist":$scope.subSizeArr}); 
    console.log($scope.subSize); 
    console.log($scope.choiceArr); 
    console.log($scope.subSizeArr);*/ 
    /*$scope.finalArr.push({"attributeid":$scope.sizeId,"attributevaluelist":$scope.subSize});*/ 
    $scope.exSize.push({"index":index}); 

} 
$scope.afterChangeAttr4 = [{}]; 
$scope.addSubSize = function(id){ 
    //$scope.sizeId = id; 
    $scope.afterChangeAttr.push({}); 
    /*$scope.hasArr.push({});*/ 
    console.log('id'+id); 
} 

Для выбора одного атрибута и вспомогательных атрибутов он отлично работает. Если я нажмем на добавление атрибута во второй раз, значения int в первом раскрывающемся списке и в раскрывающемся списке ниже null. Нужна помощь в этой части

Answer 1

I Взял определенную свободу и внес некоторые изменения в реализацию всего кода, удалив избыточные объекты кода и области видимости и сделав функциональность более динамичной по своей природе. Здесь работает plunker для изменений, которые я имею Сделано. Можно многое улучшить, но я только что ответил на ваш вопрос в этот момент.

Ваша функция changeSelect будет выглядеть

$scope.changeSelect = function(id, index) { 
      $scope.sizeId = id; 
      angular.forEach($scope.modifyList, function(key, value) { 
        if (key.attributeid === id) { 
         $scope.hasArr[index] = key.attribuevaluelist; 
} 
}) 
}; 

Ваш HTML изменяется на

<div ng-repeat="choice in exSize track by $index"> 
     <label>Attribute {{$index+1}} </label> 
     <div id="select"> 
      <select ng-model="choice.attributeid" ng-options="a.attributeid as a.attributename for a in modifyList" ng-change="changeSelect(choice.attributeid,$index)" class="minimal" required> 
       <option value="">Please Select An Attrtibute</option> 
      </select> 
      <label class="extra"><span class="plusCircle"><span id="addTaxBtn" ng-click="addSize($index)">+</span></span> Add Attribute<span ng-hide="exSize.length==1">/</span></label> 
      <label class="extra extra_remove" ng-hide="exSize.length==1"><span class="plusCircle"><span id="addTaxBtn" ng-click="rmSize($index)">-</span></span> Remove</label> 
     </div> 
     <!-- &&&& ng-if="choice.attributeid" &&&& --> 
     <!-- <div ng-repeat="(index1,sub) in subSize" ng-if="choice.attributeid"> --> 
     <div ng-repeat="sub in afterChangeAttr track by $index"> 
      <div id="select" ng-show="choice.attributeid"> 
       <div> 
        <div> 

         <select ng-model="sub.values[$parent.$index]" ng-options="v.attributevalue as v.attributevalue for v in hasArr[$parent.$index]" style="width:17%;margin-top:10px;"> 
          <option value="">Select</option> 
         </select> 
         <input type="text" ng-model="sub.attributeprice" style="width:35%;" name="subAttr" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/"> 
         <label class="extra"><span class="plusCircle"><span id="addTaxBtn" ng-click="addSubSize(choice.attributeid)">+</span></span> Add<span ng-hide="afterChangeAttr.length==1 ||afterChangeAttr.length==5">/</span></label> 
         <label class="extra extra_remove" ng-hide="afterChangeAttr.length==1"><span class="plusCircle"><span id="addTaxBtn" ng-click="rmSubSize($index)">-</span></span> Remove</label> 
        </div> 

       </div> 
       <div ng-messages="addMenu.subAttr.$error" class="error" role="alert" ng-if="addMenu.subAttr.$dirty"> 
        <div ng-message="pattern">Please Enter Only Numbers</div> 
        <div ng-message="required">Sales Price Is Mandatory</div> 
       </div> 
      </div> 
     </div> 
    </div> 

Я надеюсь, что это решает проблему.