$ indexと$ parentを使ってng-repeatとchild ng-repeatでng-modelを動的に作成する$ index？

Question

私はいくつかの入力フィールドとチェックボックスを持つフォームコントローラを持っています。保存をクリックして別のアイテムボタンを追加すると、一度にフォームコントローラ全体をコピー（複製）しています。それはn回の回数行うことができます。私は量と呼ばれる1フォーム入力フィールドがあるチェックボックスをクリックして、別の項目の追加]ボタンをするとき、私は、チェックボックスを持っているの内側に、私は、フォームのコントローラで

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

ボタンをクリックしたときに私は1つのアレイは、フォーム要素をプッシュし作成しています。これを使用してn個の数量を作成することができます。もう1つの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つのQuantitiesフィールドがあり、parent2には3つの数量があります。各親は独立した数量を有する。私がparent2から2番目の数量を削除すると、それも親1から削除されます。私は、親2と親1のみを個別に削除し、quantiyフィールドも追加したいと考えています。私の完全な働きはここにあるcodepenです。私に解決策を与えてくれている方は、事前にお礼申し上げます。

Answer 1

この種のロジックには、多次元配列を使用しないでください。 Javascript/Jsonはこの仕事に最適なタイプです。あなたが項目のリストを含む宝石の配列を持っている必要があり

：概念の

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

が証明：https://plnkr.co/edit/PLTFDvHszXrTWA7rrjcf?p=preview

EDIT：コンプリートplunker

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

あなたはアイテムを同じように削除しますコメントごとに。

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