AngularJSテーブルの行を追加

Question

私はangularJSを使用しています。私のページには1つのテーブルがあります。入力フィールドを持つ行を追加するボタンを1つ作成しました。私のソリューションは、行とフォームの入力フィールドの値を追加するために良い仕事が、私は特定の行を削除する必要がある場所ではうまくいきません。私はフォーム用に1つの関数を使用し、行を追加および削除するために1つの関数を使用します。

それはこのようなものだ：

<div ng-init="tmplCtr.newPeople()"> 
<div class="col-lg-12"> 
    <input name="postsubmit" class="btn btn-default btn-sm" type="submit" value="Save table" ng-click="tmplCtr.newTable(tmplCtr.table)" /> 
    <button class="btn btn-default btn-sm" ng-click="tmplCtr.editRow()">Add row</button> 
</div> 

<form name="peopleForm" novalidate> 

    <div class="table-responsive"> 
     <table class="table"> 
      <thead> 
       <tr> 
        <th class="place-name">Name</th> 
        <th class="place-value">Lastname</th> 
        <th class="place-options">Options</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="people in tmplCtr.peoples"> 
        <td class="place-name"><input type="text" name="" class="form-control" autocomplete="off" ng-model="tmplCtr.peoples.values[$index].name"></td> 
        <td class="place-last"><input type="text" name="" class="form-control" autocomplete="off" ng-model="tmplCtr.peoples.values[$index].lastname"></td> 
        <td class="place-options"><button class="btn btn-danger btn-md btn-delete" ng-click="tmplCtr.editRow($index)">Delete</button></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 

</form> 

私はボタンが行を追加押すと、私は行を取得するが、私は、削除行を押したときに、私は配列ではなく、インデックスによって画面が、最後の行から行を削除します。その行の値もフォームスコープから削除されません。機能は：

function editRow(item) { 
     if(item == undefined) { 
      vm.peoples.push({}); 
     } else { 
      vm.peoples.splice(item,1); 
     } 
    } 

誰でも手伝ってもらえますか？

Answer 1

私はその優れた二つの機能を作るために考えて、最初の1項目を追加するためのもので、2つ目は、以下のように削除するためです：

function addEmptyItem(){ 
    vm.peoples.push({}); 
} 

function deleteItem(index){ 
    vm.peoples.splice(index, 1); 
} 

次に、あなたのビューであなたがtmplCtr.editRow($index)変更することができます - >tmplCtr.deleteItem($index)を

さらに、リピート・ディレクティブにperson.nameなどの構文を使用することを強くお勧めします。

EDIT：

これは仕方によってテストされていません...