AngularJS Zeile in Tabelle hinzufügen

Question

Ich benutze AngularJS und ich habe eine Tabelle auf meiner Seite, ich machte eine Schaltfläche zum Hinzufügen von Zeilen mit Eingabefeldern. Meine Lösung funktioniert gut zum Hinzufügen von Zeilen und Wert von Eingabefeldern in Form, aber funktioniert nicht gut, wo ich bestimmte Zeile löschen muss. Ich verwende eine Funktion für das Formular und eine weitere für das Hinzufügen und Löschen von Zeilen.

Es ist so:

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

Wenn ich Taste Reihe I Reihe bekommen hinzufügen drücken, aber wenn ich Zeile drücken lösche ich Reihe von Bildschirm, aber letzte Zeile in dem Feld löschen, nicht durch den Index. Außerdem wird der Wert dieser Zeile nicht aus dem Formularbereich gelöscht. Funktion ist:

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

Kann mir jemand helfen?

Answer 1

Ich denke, es ist besser zu zwei Funktionen zu machen, die erste ist Artikel für das Hinzufügen und das zweite ist wie unten zum Löschen:

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

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

Dann Ihrer Ansicht nach können Sie tmplCtr.editRow($index) ändern ->tmplCtr.deleteItem($index)

Des Weiteren wird dringend empfohlen, diese Syntax person.name usw. in Ihrer Wiederholungsanweisung zu verwenden.

EDIT:

Dies übrigens nicht getestet ...