I'm encountering an issue while trying to splice out items in this ng-repeat based on their $index. Although it works perfectly for adding items, when attempting to delete an item using the same code, it ends up removing only the last item of the array as if employing the pop() method. I am baffled by this behavior. Here's the object that I'm repeating:
"lineItems": [
{
"area": "Bedroom",
"label": "Sleep Time",
"notes": "",
"pictures": [],
"subLineItems": [
{
"label": "Flooring",
"data": {
"rates": [
{
"label": "Damaged",
"value": "1",
"color": "damaged-red"
},
{
"label": "Poor",
"value": "2",
"color": "poor-orange"
},
{
"label": "Dirty",
"value": "3",
"color": "dirty-yellow"
},
{
"label": "Fair",
"value": "4",
"color": "fair-light-blue"
},
{
"label": "Good",
"value": "5",
"color": "good-green"
}
]
},
"items": [
[
{
"uuid": "6f5fed0c-db03-41a0-a575-15af3ad3",
"label": "Hot Water Tank",
"selected": false,
"price": 500,
"labor": [
{
"uuid": "8b9f9ea2-b163-45c0-9a80-087a8e16",
"label": "Install Carpet Basic",
"selected": false,
"price": "1.00"
},
{
"uuid": "a696faca-197a-4fd9-972c-05f197f4",
"label": "Install Trim Basic",
"selected": false,
"price": "0.50"
},
{
"uuid": null,
"label": "Select",
"selected": true
}
]
},
{
"uuid": "7815a160-7b70-48d1-ba32-8c232654",
"label": "Ceiling Fan Replacement",
"selected": false,
"price": 175,
"labor": [
{
"uuid": "8b9f9ea2-b163-45c0-9a80-087a8e16",
"label": "Install Carpet Basic",
"selected": false,
"price": "1.00"
},
{
"uuid": "a696faca-197a-4fd9-972c-05f197f4",
"label": "Install Trim Basic",
"selected": false,
"price": "0.50"
},
{
"uuid": null,
"label": "Select",
"selected": true
}
]
},
{
"uuid": null,
"label": "Select",
"selected": true
}
]
],
"rate": null,
"notes": null,
"pictures": []
}
Here is my HTML:
<ul class="list-inline col-xs-12">
<form class="form-inline col-xs-12" id="expenseForm">
<!-- li = items[0].array -->
<li ng-repeat="item in subLineItem.items track by $index" class="bouncy-slide-left" ng-class-even="'even-stripe'">
<!-- MATERIALS -->
<div class="form-group col-xs-3" style="margin-left: 0px !important">
<label for="material">{{labels.material.label}}</label>
<br>
<select name="material" class="form-control" ng-model="expense.mat.item" style="width: 125px">
<option value="{{mat.uuid}}" ng-repeat="mat in item" ng-selected="mat.selected">{{mat.label}}</option>
</select>
</div>
<div class="form-group col-xs-2">
<label>{{labels.material_qty.label}}</label>
<br>
<input type="text" ng-model="item.mat.qty" class="form-control" name="quantity" placeholder="{{labels.material_qty.placeholder}}" style="width: 55px; overflow: scroll">
</div>
<div class="form-group col-xs-2">
<label>{{labels.material_cost.label}}</label>
<br>
<input type="text" ng-model="expense.mat.price" class="form-control" name="labor" placeholder="{{labels.labor_cost.placeholder}}" style="width: 55px; overflow: scroll">
</div>
<div class="form-group col-xs-2">
<label>{{labels.totals.total}}</label>
<br>
<input type="text" ng-model="expense.mat.total" class="form-control" name="labor" placeholder="{{labels.labor_cost.placeholder}}" style="width: 55px; overflow: scroll">
</div>
<div class="icon-str col-xs-1" style="padding-left: 0px" ng-click="removeItem($parent.$parent.$index, $parent.$index, $index)">
<label for=""></label>
<br>
<i class="fa-trash delete-inspec"></i>
</div>
<!-- LABOR ITEMS -->
<div class="form-group col-xs-3">
<label for="labor">{{labels.labor.label}}</label>
<br>
<select name="labor" class="form-control" ng-model="item.lab.item" style="width: 125px">
<option value="{{lab.uuid}}" ng-repeat="lab in item[0].labor" ng-selected="lab.selected">{{lab.label}}</option>
</select>
</div>
<div class="form-group col-xs-2">
<label>{{labels.material_qty.label}}</label>
<br>
<input type="text" ng-model="item.lab.qty" class="form-control" name="hours" placeholder="{{labels.labor_qty.placeholder}}" style="width: 55px;overflow: scroll">
</div>
<div class="form-group col-xs-2">
<label>{{labels.labor_cost.label}}</label>
<br>
<input type="text" ng-model="item.lab.price" class="form-control" name="labor" placeholder="{{labels.labor_cost.placeholder}}" style="width: 55px;overflow: scroll">
</div>
<div class="form-group col-xs-2 ">
<label>{{labels.totals.total}}</label>
<br>
<input type="text" ng-model="item.lab.total" class="form-control" name="labor" placeholder="{{labels.labor_cost.placeholder}}" style="width: 55px;overflow: scroll">
</div>
<!-- RESPONSIBLE PARTY -->
<div class="form-group row col-xs-12" style="margin-left:0px !important; padding-left: 0px; padding-bottom: 10px; border-bottom: 2px solid #888">
<div class="col-xs-5 text-left" style="padding-right: 0px">
<label for="expenses">{{labels.responsible.label}}</label>
<br>
<select name="expenses" ng-model="expense.responsible" class="form-control" style="width: 200px">
<option value="{{resp.value}}" ng-repeat="resp in labels.responsibleParty" ng-selected="resp.selected">{{resp.label}}</option>
</select>
</div>
</div>
</li>
</form>
</ul>
Here is my controller :
//add line item when NEW button is pressed
$scope.add = function(a, b){
//create the source of the copy, and where you want to send it (destination is a blank array)
var mySource = $scope.lineItems[0].subLineItems[0].items[0];
var myDestination = [];
//copy the source and send it to destination
angular.extend( myDestination, mySource);
//push that newly built array into the array
$scope.lineItems[a].subLineItems[b].items.push(myDestination);
//show the updated version of that array
console.log( $scope.lineItems[a].subLineItems[b].items);
};
//remove item from array
$scope.removeItem = function(a, b, c){
console.log(a, b, c);
$scope.lineItems[a].subLineItems[b].items.splice(c, 1);
console.warn($scope.lineItems[a].subLineItems[b].items);
};
This prints the correct number in your console but actually removes the last item in the items array. Any Ideas?