AngularJS在表格中添加行

Question

我使用 angularJS，并且我的页面上有一个表格，我制作了一个按钮来添加带有输入字段的行。我的解决方案适用于在表单中添加行和输入字段的值，但在我需要删除特定行的情况下效果不佳。我将一个函数用于表单，另一个用于添加和删除行。

是这样的：

<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

我觉得最好做两个函数，第一个用于添加项目，第二个用于删除，如下所示：

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

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

那么在你看来你可以改变tmplCtr.editRow($index) --> tmplCtr.deleteItem($index)

此外，强烈建议在您的重复指令中使用此语法person.name 等。

编辑：

这个顺便没测试过……