javascript - 使用 Angular 或 js 从 json 对象中删除行

Question

我的页面上有这个漂亮的小列表，您可以在其中按“+”添加新行(通过推送很容易)并删除带有“X”的行，我不知道该怎么做。

我的 JSON 结构:

 "priceExtra" : [
    {
        "price" : NumberInt(2330), 
        "calc" : "1 x 2330", 
        "name" : "Foo price"
    }, 
    {
        "price" : NumberInt(5000), 
        "calc" : "2 x 2500", 
        "name" : "Baa price"
    } 
    {
        "price" : NumberInt(300), 
        "calc" : "1 x ฿300", 
        "name" : "Check-out full Cleaning"
    }
]

我的代码:

//
// Add extra line
//
vm.addLine = () => {    
    vm.priceExtra.push(
        {
            name  : "", 
            calc  : "", 
            price : 0
        }
    ) 
}

//
// Remove line
//
vm.delLine = () => {    

}

问题是我在 priceExtra 数组中实际上没有任何唯一的键，甚至“价格”也可能在多行中重复。

我怎样才能做到这一点？

哦忘了添加 HTML

<tr style="height:38px;" ng-repeat="extraLine in vm.priceExtra">
    <td class="book-mid" style="width:50%;" colspan="2">
        <input type="text" ng-model="extraLine.name" id="lineName" class="book-field book-field-slim ng-pristine ng-valid ng-not-empty ng-touched" aria-invalid="false" data-ng-change="vm.changeRent()">
    </td>
    <td class="book-mid-right" style="width:30%;">
        <input type="text" ng-model="extraLine.calc" id="lineCalc" class="book-field book-right book-field-slim ng-pristine ng-valid ng-not-empty ng-touched" aria-invalid="false" data-ng-change="vm.changeRent()">
    </td>
    <td class="book-mid-right" style="width:15%;">
        <input type="text" ng-model="extraLine.price" id="lineprice" class="book-field book-right ng-pristine ng-valid ng-not-empty ng-touched" aria-invalid="false" data-ng-change="vm.changeTotal()">
    </td>
    <td style="width:5%; text-align:right; padding-left:4px;">
        <button class="book-button book-text-button col-std-gray" ng-click="vm.newTenant=false">
            <md-icon class="material-icons book-material" aria-label="Close">close</md-icon>
        </button>
    </td>
</tr>

Answer 1

使用 $index 获取 ng-repeat 中的索引:

...
<td style="width:5%; text-align:right; padding-left:4px;">
    <button class="book-button book-text-button col-std-gray" ng-click="vm.newTenant=false; vm.delLine($index);">
        <md-icon class="material-icons book-material" aria-label="Close">close</md-icon>
    </button>
</td>
...

并使用这个:

vm.delLine = (index) => {    
    vm.priceExtra.splice(index,1);
}