CODEWITHSUNDEEP
javascriptangularjsjson
torbenrudgaard
torbenrudgaard

Reputation: 2561

Removing lines from json object with angular or js

I got this nifty little list on my page, where you press the "+" to add a new line (that was easy with push) and remove the lines with the "X" which I dont know how to do.

enter image description here

My 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"
    }
]

My code:

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

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

}

Problem is that I dont really have any unique keys in the priceExtra array, even the "price" could be duplicate on several lines.

How could I do this?

Ohh forgot to add 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>

Upvotes: 0

Views: 153

Answers (1)

dev8080
dev8080

Reputation: 4020

Take the index in your ng-repeat using $index:

...
<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>
...

And use this:

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

Upvotes: 2

Related Questions