How to delete row from table in angularjs - angularjs

Question

Now I need to delete row(s) depends on it is selected or not. But how can I access $index in the control for each selected row?
my code is here:
<div ng-app="appTable">
<div ng-controller="Allocation">
<button ng-click="add()"> Add </button>
<button ng-click="remove()">remove</button>
<table>
<th>
<td>S.No</td>
<td>Name</td>
<td>Dept</td>
</th>
<tr ng-repeat="data in dataList">
<td><input type="checkbox" ng-model="delete"/>{{$index}}</td>
<td> <input type="text" ng-model="data.name"/></td>
<td><input type="text" ng-model="data.dept"/></td>
</tr>
</table>
</div>
</div>
var app = angular.module("appTable",[]);
app.controller("Allocation",function($scope) {
$scope.dataList = [{name:'lin',dept:'b'},{name:'test',dept:'aaa'}];
$scope.add = function(){
var data = {};
data.name ='' ;
data.dept ='';
$scope.dataList.push(data);
}
var deletes=[];
$scope.delete=false;
$scope.remove = function(){
console.log(deletes);
angular.forEach($scope.delete,function(v){
if(v==true){
deletes.push($index);*How can I get the $index for selected row*
console.log(deletes);
}
});
angular.forEach(deletes,function(v,k){
$scope.dataList.splice(v, 1);
})
}
});
Now I can add the row which match the requirement, but my issue is user have to check the checkedbox in the row which they want to delete and then click delete button to delete them. for example, they can check the first and third row to delete and only keep second row.

Answer 1

<div ng-app="appTable">
<div ng-controller="Allocation">
<button ng-click="add()"> Add </button>
<button ng-click="remove()">remove</button>
<table>
<th>
<td>S.No</td>
<td>Name</td>
<td>Dept</td>
</th>
<tr ng-repeat="data in dataList">
<td><input type="checkbox" ng-model="data.isDelete"/>{{$index}}</td>
<td> <input type="text" ng-model="data.name"/></td>
<td><input type="text" ng-model="data.dept"/></td>
</tr>
</table>
</div>
</div>
var app = angular.module("appTable",[]);
app.controller("Allocation",function($scope) {
$scope.dataList = [{name:'lin',dept:'b'},{name:'test',dept:'aaa'}];
$scope.add = function(){
var data = {};
data.name ='' ;
data.dept ='';
$scope.dataList.push(data);
};
$scope.remove = function(){
var newDataList=[];
angular.forEach($scope.dataList,function(v){
if(!v.isDelete){
newDataList.push(v);
}
}); $scope.dataList=newDataList;
};
});
https://jsfiddle.net/9qttf7ph/

Answer 2

You might need to add the following in your ng-repeat directive :
<tr ng-repeat="data in dataList track by $index">
and then use $index for deletion.
you can get more informations about this here from the official angular documentation.

Answer 3

Replace
<input type="checkbox" ng-model="delete"/>
by
<input type="checkbox" ng-model="data.toBeDeleted"/>
Then, on the click of the button, remove all the data which have a truthy toBeDeleted attribute from the array.