On my webpage, I have a list where you can add a new line by pressing the "+" button (easy with push), but I'm not sure how to remove lines using the "X" button.
https://i.stack.imgur.com/nm06A.png
This is the JSON structure:
"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"
}
]
Here's my code for adding and removing lines:
//
// Add extra line
//
vm.addLine = () => {
vm.priceExtra.push(
{
name : "",
calc : "",
price : 0
}
)
}
//
// Remove line
//
vm.delLine = () => {
}
The issue is that unique keys are lacking in the priceExtra array, even the "price" field could be duplicated on multiple lines.
Any suggestions on how to approach this problem?
I almost forgot to include the 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>