スプライスを使用してangularJSのネストされたフォームを削除する方法

Question

私は入れ子になったフォームを持っています....新しいフィールドをうまく追加できますが、フィールドを削除するにはいくつかの問題があります。

は私が...フィールド

現在

私が持っているを削除するには、オブジェクトの私の配列内の特定の場所をスプライスすることができるようにしたい

HTML：

<div ng-repeat="senarioItem in attendees.formData.scenarios[0].scenarioItems" class="row"> 
     <div ng-hide="cost._destroy">  
      <div class="form-group col-xs-5"> 
       <label for="costDescription">Description</label> 
       <input class="form-control input-group-lg" type="text" name="costDescription" ng-model="senarioItem.costDescription"/> 
      </div> 
      <div class="form-group col-xs-2"> 
       <label for="cost">Amount</label> 
       <input 
        class="form-control input-group-lg" 
        type="number" 
        name="cost" 
        ng-model="senarioItem.cost"/> 
      </div> 

      <div class="col-md-2"> 
       <a ng-click="removeCost()" class="btn btn-xs btn-danger">X</a> 
      </div> 
     </div> 
    </div> 

コントローラ：

attendees.removeCost = function(){ 
      var cost = attendees.formData.scenarios[0].scenarioItems[index]; 
      if(cost.id) { 
       cost._destroy = true; 
      } else { 
       attendees.cost.splice(index, 1); 
      } 


     var cost = attendees.formData.scenarios[0].scenarioItems[index]; 
    }; 

JSON：

"scenarioItems": [ 
     { 
      "cost": "", 
      "costDescription": "", 
     }, 
     { 
      "cost": "", 
      "costDescription": "" 
     }, 
     { 
      "cost": "", 
      "costDescription": "" 
     }, 
     { 
      "cost": "", 
      "costDescription": "" 
     } 
     ] 

Answer 1

<div class="col-md-2"> 
    <a ng-click="removeCost($index)" class="btn btn-xs btn-danger">X</a> 
</div> 

この関数へのパラメータとしてインデックスを渡す機能でそれを除去

attendees.removeCost = function(index){ 
      var cost = attendees.formData.scenarios[0].scenarioItems[index]; 
      if(cost.id) { 
       cost._destroy = true; 
      } else { 
       attendees.cost.splice(index, 1); 
      } 


     var cost = attendees.formData.scenarios[0].scenarioItems[index]; 
};