AngularJS在表格中添加行

我使用angularJS，并且在页面上有一个表格，我制作了一个按钮来添加具有输入字段的行。我的解决方案适用于在表单中添加行和输入字段的值，但在我需要删除特定行时效果不佳。我使用一种形式的功能，另一种功能用于添加和删除行。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); 
     } 
    }

任何人都可以帮助我吗？

来源

2017-01-24 Sasa

你不应该用纳克模型=被 “tmplCtr.table.values [$指数]。名称”，而不是用NG-模型=“place.name”和其他字段类似点击删除按钮后，您可以发送地点对象。 NG点击=“tmplCtr.editRow（地方）” 里面editRow你可以看看在阵列中的位置，将其取下 –

但是，增加它的确定，我需要从tmplCtr.peoples.values数组中删除对象。我在函数编辑行中发送了好的索引，但vm.peoples.splice（item，1）;莫名其妙地没有做好 – Sasa

你可以做一个蹲点？ – Korte

我认为它能够更好地使两个功能，第一个是增加项目，第二个是删除象下面这样：

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

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

然后在您的视图可以更改tmplCtr.editRow($index) - >tmplCtr.deleteItem($index)

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

编辑：

这不是由路测试...

来源

2017-01-24 18:15:01

它不起作用，vm.peoples.splice（index）;删除所有，如果我写vm.peoples.splice（index，1）;然后删除最后一行数组 – Sasa

@Sasa尝试更新的答案。如果它不起作用，你必须更新'$ scope'对象。打赌让我知道，如果有任何问题，我会解释你 –

我会，我会寻找更新的问题，并使闯入者更容易 – Sasa

AngularJS在表格中添加行

回答

相关问题