Angular loop through table row and check for checked checbox - angularjs

Question

I have a table that has a list from database with checkbox on each row, checkbox will used for ex. during deletion of the record.
So what i am trying to achieve is that when i clicked the delete button, angular will loop each row in table and check the checkbox whether is checked, if yes the please proceed to delete. Dont have any idea how to do this. Someone please give some related example.
Here is my code
index.html
<button class="ui red labeled icon button right floated" type="button" data-content="Delete selected item(s)" id="delete" ng-click="deleteSeleted()"><i class="trash icon"></i>Delete</button>
<div class='container-table'>
<table class="ui fixed single line celled table striped sortable compact" style="width:2000px" id="mytable">
<thead>
<tr>
<th class="width-checkbox"><input type="checkbox" ng-model="matin.selectedAll" /></th>
<th class="width-120">Item</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in data">
<td><input type="checkbox" ng-checked="matin.selectedAll"></td>
<td>{{x.item}}</td>
</tr>
</tbody>
</table>
</div>

Answer 1

<tr ng-repeat="x in data">
<td><input type="checkbox" ng-model="x.selected"></td>
<td>{{x.item}}</td>
</tr>
Angular Js Code
for (var k = 0; k < $scope.data.length; k++)
{
if($scope.data[k].selected==true)
{
//Perform your desired thing over here
var val=$scope.data[k].item //to getData
}
}

Answer 2

Please find the fiddler link which i have created to select all the items in the table and on delete print which ever is checked https://jsfiddle.net/dfL1L944/3/
var appModule = angular.module('Module', []);
appModule.controller("DataController", function($scope) {
$scope.data = [{"name":"Alex"},{"name":"Juni"}]
$scope.deleteAll = false;
$scope.deleteSeleted = function(){
$scope.data.forEach(function(x) {
console.log(x.name);
});
}
$scope.selectedAll = function(){
$scope.data.forEach(function(x) {
if($scope.deleteAll){
x.deleted = true;
}
else{
x.deleted = false;
}
});
}
});
HTML Code
<div ng-app="Module"> <div ng-controller="DataController">
<button class="ui red labeled icon button right floated" type="button" data-content="Delete selected item(s)" id="delete" ng-click="deleteSeleted()"> <i class="trash icon"></i>Delete</button> <div class='container-table'> <table class="ui fixed single line celled table striped sortable compact" style="width:200px" id="mytable"> <thead>
<tr>
<th width="20px">
<input type="checkbox" ng-model="deleteAll" ng-click="selectedAll()" /></th>
<th>Item</th>
</tr> </thead> <tbody>
<tr ng-repeat="x in data">
<td width="2px"><input type="checkbox" ng-checked="x.deleted"></td>
<td>{{x.name}}</td>
</tr> </tbody> </table> </div>
</div> </div>

Answer 3

You could use $filter (you would need to insert $filter as a dependency)
$scope.data: [ // assuming your model looks like this
{
Id: "my_id",
Name: "my_name",
checked: true
}
];
var myFilteredValues = $filter('filter')($scope.data, { $: true });
And in your HTML
<tr ng-repeat="x in data">
<td><input type="checkbox" ng-model="x.checked"></td>
<td>{{x.Name}}</td>
</tr>

Answer 4

You can add a .toDelete property to every x in your data array, for example, and bind the checkboxes like this:
<input type="checkbox" ng-model="x.toDelete">
Afterwards you can create a button under the table:
<input type="button" ng-click="deleteRows();" value="Delete rows">
...And then create a function on your controller's scope (a newbie-friendly function):
$scope.deleteRows = function(){
var i=0;
for(i=0; i<data.length; i++){
if(data[i].toDelete){
//send your server requests here and do
//your stuff with the element if needed
data.splice(i, 1); //remove the element from the array
i--; //decrement the value of i so it stays the same
//(array is now shorter than it used to be)
}
}
}
You can also keep the information on what row is to be deleted in a separate array on the same scope but this solution seems simpler to me.
Regarding the "Check All" checkbox at the top, you can create a function and bind it with ng-click to a button or any other element and use that function to simply iterate through all the elements and set the .toDelete property to true for each one of them.