使用$ index和$ parent。$ index在ng-repeat和child ng-repeat中動態創建ng-model。

Question

我有表單控制器與一些輸入字段和複選框，當我點擊保存並添加另一個項目按鈕我一次複製（克隆）整個窗體控制器。它可以做n次。我創建一個陣列推表單元素，當我按一下按鈕

<div class="row category-description-block" ng-repeat="values in categoryval.CategoryValuesArray track by $index"> 
      <div class="col"> 
       <h3>Tell us about your jewelry</h3> 
       <div class="list"> 
      <div class="form_group"> 
         <label class="item item-input item-select"> 
          <div class="input-label"> 
           Type of Jewelry? 
          </div> 
           <span class="input-label"></span> 
          <input ng-model="categoryval.Luxary_Eyeware_Brand[$index]" type="text" placeholder=""> 
         </label> 
        </div> 




        <!-- more details about jewelry starts --> 
       <ion-checkbox ng-model="categoryval.jewelrymoreDetailschecked[$index]" ng-change="jewelrymoreDetailsChange($index)">I have the jewelry details 
         <br/> (Diamond shape, clarity, color, etc.)</ion-checkbox> 

        <div ng-show="IsVisible[$index]"> 

         <div> 
          <div class="row"> 
           <div class="col"> 
            <h4>Describe your diamonds</h4> 
           </div> 
          </div> 



          <div class="repeat-set card"> 
           <!-- inner repeating div strats--> 

           <div class="repeat-div" ng-repeat="jewels in categoryval.moreJewelryDetailsArray track by $index"> 
            <div class="row close-icon-bg"> 
             <div class="col"> 
              <a href="" ng-model="jewels.closeItem[$parent.Sindex][$index]" ng-click="removeItem($parent.$index,$index)" class="close-icon">remove</a> 
             </div> 
            </div> 
            <div class="row "> 
             <div class="col"> 
              <div class="form_group"> 
               <label class="item item-input item-stacked-label"> 
                <span class="input-label">Quantity </span> 
                <input ng-model="jewels.quantity[$parent.$index][$index]" type="text" placeholder="Quantity"> 
               </label> 

              </div> 
             </div> 
            </div> 
           </div> 
           <!-- inner repeating div Ends--> 



           <div class="form_group text-center"> 
            <label class="item item-input item-stacked-label"> 
             <button class="button button-small button-royal" ng-click="addJewelryDetails($index)">Add an additional item</button> 
            </label> 
           </div> 


        <div class="form_group"> 
         <label class="item item-input item-stacked-label"> 
          <span class="input-label">Description</span> 
          <textarea ng-model="categoryval.description[$index]" placeholder=""></textarea> 
          <p class="form-notes">The more information you provide, the better!</p> 
         </label> 
        </div> 



       </div> 
      </div> 
     </div> 



     <div class="row custom-button"> 
      <div class="col-25"> 
       <button class="button button-block button-balanced" ng-click="categoryContinue(categoryval)">Continue</button> 
      </div> 
      <div class="col"> 
       <button class="button button-block button-balanced" ng-click="globalAppend()">Save and add another item</button> 
      </div> 
     </div> 
    </div> 

在表單控件內我有複選框，當我點擊複選框有一個表單輸入的被叫數量字段，添加其他項目按鈕。您可以使用它來創建n個數量。我正在使用另一個ng-repeat將值推入另一個數組。

$scope.addJewelryDetails = newJewelryDetails; 
$scope.globalAppend = newGlobalDiv; 


$scope.IsVisible = []; 
$scope.categoryval = { 
    jewelrymoreDetailschecked: false 
}; 

$scope.jewelrymoreDetailsChange = function(index) { 
    $scope.IsVisible[index] = $scope.categoryval.jewelrymoreDetailschecked[index]; 

}; 


$scope.categoryContinue = function(categoryvalues) { 
    console.log(categoryvalues); 
}; 



     $scope.categoryval = {}; 
    // $scope.categoryval.jewelryCollection = {}; 
    $scope.categoryval.images = []; 
    $scope.categoryval.CategoryValuesArray = []; 
     $scope.categoryval.moreJewelryDetailsArray = []; 
     $scope.categoryval.quantity = []; 

function init() { 

    newJewelryDetails(); 
    newGlobalDiv(); 
} 

function newGlobalDiv() { 

    $scope.categoryval.CategoryValuesArray.push({}); 
} 

function newJewelryDetails(parentindex) { 

    $scope.categoryval.moreJewelryDetailsArray.push({}); 
    $scope.quantity = ''; 

} 
$scope.removeItem = function(parentindex,index) { 
    console.log(JSON.stringify(parentindex)); 

    $log.log("parent Index:::" + parentindex + "index::::" + index); 


    //var quantity =  $scope.categoryval.moreJewelryDetailsArray[index].quantity;  
    $scope.categoryval.moreJewelryDetailsArray.splice(index,1); 

}; 


init(); 

但我有一個數量字段添加和刪除問題。例如，Parent1有3個數量字段，parent2有3個數量。每個父母都有獨立的數量。當我從父母2中刪除第二個數量時，它也將從父母1中刪除。我只想在父級2和父級1上單獨刪除並添加quantiy字段。我完整的工作小提琴在這裏codepen。任何一個給我的解決方案提前感謝

Answer 1

不要使用mutlidimensional數組這種邏輯。 Javascript/Json是此作業的完美類型。

你應該有一個包含項目列表的珠寶陣列：

[ 
    { 
    items: [{name: "", description: ""}, {name: "", description: ""}] 
    }, 
    { 
    items: [{name: "", description: ""}, {name: "", description: ""}] 
    } 
] 

您刪除的項目以同樣的方式：https://plnkr.co/edit/PLTFDvHszXrTWA7rrjcf?p=preview

編輯：

$scope.removeItem = function(parentindex,index) { 
    $scope.jewelryArray[parentIndex].items.splice(index,1); 
}; 

概念證明完全plunker根據評論。

https://plnkr.co/edit/crLzfRKFA2FrhRhXLcGY?p=preview