使用angular或js从json对象中删除线条

Question

我的页面上有这个漂亮的小清单，你按下＆＃34; +＆＃34;添加一个新行（使用push很容易）并使用＆＃34; X＆＃34;删除行。我不知道怎么做。

我的JSON结构：

@Override
public void start(Stage stage) throws Exception {
    Parent root = FXMLLoader.load(getClass().getResource("Preview.fxml"));
    Scene scene = new Scene(root);
    stage.setScene(scene);
    stage.show();
}
public static void main(String[] args) {
    launch(args);
}

我的代码：

 "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 = () => { } 数组中确实没有任何唯一键，即使是＆＃34;价格＆＃34;可能在几行上重复。

我怎么能这样做？

哦忘了添加HTML

priceExtra

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);
}