AngularJS add row in table

Question

I use angularJS and I have one table on my page, I made one button to add row with input fields. My solution work good for adding rows and value of input fields in form, but doesn't work well where I need to delete particular row. I use one function for form, and another for adding and deleting rows.

It's like this:

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

When I press button add row I get row, but when I press delete row I delete row from screen but last row in array, not by index. Beside that also value of that row is not deleted from form scope. Function is:

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

Can anyone help me?

Answer 1

I think its better to make two functions, the first one is for adding items, and the second one is for deleting like below:

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

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

Then in your view you can change tmplCtr.editRow($index) --> tmplCtr.deleteItem($index)

Furthermore it is strongly advised to use this syntax person.name etc in your repeat directive.

EDIT:

This is not tested by the way...