Currently, I am working on a form for an Items list that allows users to add, edit, and delete items. While the add and edit functionalities are working correctly, I am facing some issues with the delete functionality.
Below is a snippet of my code that includes the delete button:
<!-- Added Items Stage -->
<div ng-repeat-start="item in items" ng-form="editItemForm" class="row">
<div class="col">
<input type="text" name="description" ng-model="item.description" placeholder="description" required>
</div>
<div class="col">
<input type="number" name="quantity" pattern="\d*" ng-model="item.quantity" placeholder="quantity" required>
</div>
<div class="col">
<input type="text" name="price" ng-model="item.price" placeholder="price" required>
</div>
<div class="col">
<select name="taxType" ng-model="item.taxType" required>
<option value="ZR">ZR</option>
<option value="SR">SR</option>
</select>
</div>
<div class="col col-20" ng-bind="(item.quantity&&item.price)?((item.quantity*item.price) | currency:''):'0.00'"></div>
<div class="col col-10">
<button type="button" class="button button-assertive button-clear icon ion-close-circled" ng-click="deleteItem(item)"></button>
</div>
</div>
<hr ng-repeat-end>
Additionally, here is the function I am using to delete an item:
$scope.deleteItem = function(item) {
$scope.items.splice($scope.items.indexOf(item), 1);
};
I have tried using `$index` and the `delete` method instead of `splice`, but I am still facing issues. Any assistance would be greatly appreciated. Thank you.
You can view a demo here.
Note: It seems like the item is removed, but the HTML is not being updated accordingly.