I am having an array with objects like [{...}, {...}] which I am outputting with ng-repeat. Then I have a delete button with a function to delete it.
Is there a simple way to delete it in AngularJS, perhaps with $index? Or I need to specify an ID on every object as an property?
If you don't apply a filter to reorder or filter your array, you can do this:
<div ng-repeat="item in items" ng-click="delete($index)">{{item}}</div> And the delete function:
$scope.items = [...]; $scope.delete = function (index) { $scope.items.splice(index, 1); } Another way to do it without filter problems: (ONLY IE9+)
<div ng-repeat="item in items | orderBy: 'id'" ng-click="delete(item)">{{item}}</div> And the delete function:
$scope.items = [...]; $scope.delete = function (item) { $scope.items.splice($scope.items.indexOf(item), 1); } 
Here is another example, using Jade too:
template.jade:
label All Items ul.list-group li.list-group-item(ng-repeat="item in items | orderBy: '_id'") strong {{item.name}} a.trash(ng-click='deleteItem(item)') //a.trash is a bootstrap trash icon, but you don't need to use it. controller.js:
$scope.deleteItem = function (item) { $scope.items.splice($scope.items.indexOf(item),1); } removeWith comparison for each element in a collection to the given properties object, returning an array without all elements that have equivalent property values.
$scope.collection = [ { id: 1, name: 'foo' }, { id: 1, name: 'bar' }, { id: 2, name: 'baz' } ] <tr ng-repeat="obj in collection | removeWith:{ id: 1 }"> {{ obj.name }} </tr> <tr ng-repeat="obj in collection | removeWith:{ id: 1, name: 'foo' }"> {{ obj.name }} </tr>
First try to do it this way, but the listing was not actualized at runtime.
$scope.delete = function (index) { delete $scope.items[index]; } Then with the answer given above by Facundo Pedrazzini did work properly for me.
$scope.delete = function (index) { $scope.items.splice(index, 1); } Version: AngularJS v1.6.4
In blade.php
<table style="width:100%;"> <tr ng-repeat="name in planFormData.names track by $index"> <td> <div class="form-group"> <label>Plan Name<span style="color:red;">*</span> </label> <input type="text" class="form-control" ng-model="planFormData.names[$index].plan_name" name="plan_name" id="status-name" placeholder="Plan Name" autocomplete="off" required> </div> </td> <td> <a href="JavaScript:Void(0);"><i class="icon-plus" ng-click="addRow($index)" ng-show="$last"></i></a> <a href="JavaScript:Void(0);"><i class="icon-trash" ng-click="deleteRow($event,name)" ng-show="$index != 0"></i></a> </td> </tr> </table> In controller.js
$scope.deleteRow = function($event, name) { var index = $scope.planFormData.names.indexOf(name); $scope.planFormData.names.splice(index, 1); }; In Angular 6, I did similar for Multi Dimensional Array. It's working
RemoveThisTimeSlot(i: number, j: number) { this.service.formData.ConsultationModelInfo.ConsultationWeekList[i].TimeBlockList.splice(j, 1); } 