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) - ＆gt; tmplCtr.deleteItem($index)

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

编辑：

这不是通过方式测试的......

AngularJS在表中添加行

1 个答案: