How to remove particular row in my table using with Angular.js? - html

Question

I am checking two check boxes in first table those records are adding in second table this is fine. But if unchecked record removing as improper way, how can I remove exact row I unchecked.
var app = angular.module('myApp',[]);
app.controller("homeCtrl", function($scope) {
$scope.items = [{
itemID: 'BR063',
itemValue: 'sagsfgjkfdsffsdfsd'
}, {
itemID: 'BR06417',
itemValue: '1231231231123'
}];
$scope.selectedItems = [];
$scope.addRec = function(result, i){
if(result == true){
$scope.selectedItems.push($scope.items[i-1]);
}
else{
$scope.selectedItems.splice($scope.items[i],1);
}
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<div ng-app = 'myApp' ng-controller="homeCtrl">
<h1>Select Rows</h1>
<table style="width:50%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Item ID</th>
<th class="text-center">Item Values</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in items">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.itemID}}</td>
<td class="text-center">{{x.itemValue}}</td>
<td class="text-center"><input type="checkbox" ng-model="itsVal" ng-change = "addRec(itsVal, $index+1)";/></td>
</tr>
</table>
<h1>Selected Rows</h1>
<table style="width:50%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Item ID</th>
<th class="text-center">Item Values</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in selectedItems">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.itemID}}</td>
<td class="text-center">{{x.itemValue}}</td>
<td class="text-center"><input type="checkbox" /></td>
</tr>
</table>
<div>

Answer 1

You just need to do $scope.selectedItems.splice(i-1, 1); in the else block. Also since result is a boolean value you can simply use if (result) in the condition:
var app = angular.module('myApp', []);
app.controller("homeCtrl", function($scope) {
$scope.items = [{
itemID: 'BR063',
itemValue: 'sagsfgjkfdsffsdfsd'
}, {
itemID: 'BR06417',
itemValue: '1231231231123'
}];
$scope.selectedItems = [];
$scope.addRec = function(result, i) {
if (result) {
$scope.selectedItems.push($scope.items[i - 1]);
} else {
$scope.selectedItems.splice(i-1, 1);
}
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<div ng-app='myApp' ng-controller="homeCtrl">
<h1>Select Rows</h1>
<table style="width:50%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Item ID</th>
<th class="text-center">Item Values</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in items">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.itemID}}</td>
<td class="text-center">{{x.itemValue}}</td>
<td class="text-center"><input type="checkbox" ng-model="itsVal" ng-change="addRec(itsVal, $index+1)" ;/></td>
</tr>
</table>
<h1>Selected Rows</h1>
<table style="width:50%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Item ID</th>
<th class="text-center">Item Values</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in selectedItems">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.itemID}}</td>
<td class="text-center">{{x.itemValue}}</td>
<td class="text-center"><input type="checkbox" /></td>
</tr>
</table>
<div>

Answer 2

The issue here is that you are trying to remove via index rather than using the id. Have made some changes in the addRec function and the line in html invoking it. Please go through them once:
var app = angular.module('myApp',[]);
app.controller("homeCtrl", function($scope) {
$scope.items = [{
itemID: 'BR063',
itemValue: 'sagsfgjkfdsffsdfsd'
}, {
itemID: 'BR06417',
itemValue: '1231231231123'
}];
$scope.selectedItems = [];
$scope.addRec = function(result, i,itemId){
if(result == true){
$scope.selectedItems.push($scope.items[i-1]);
}
else{
var index=0;
var isMatched = false;
angular.forEach($scope.selectedItems,function(item) {
if(isMatched === false) {
if(item.itemID === itemId) {
isMatched = true;
}
else {
index++;
}
}
});
$scope.selectedItems.splice(index,1);
}
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<div ng-app = 'myApp' ng-controller="homeCtrl">
<h1>Select Rows</h1>
<table style="width:50%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Item ID</th>
<th class="text-center">Item Values</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in items track by x.itemID">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.itemID}}</td>
<td class="text-center">{{x.itemValue}}</td>
<td class="text-center"><input type="checkbox" ng-model="itsVal" ng-change = "addRec(itsVal, $index+1,x.itemID)";/></td>
</tr>
</table>
<h1>Selected Rows</h1>
<table style="width:50%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Item ID</th>
<th class="text-center">Item Values</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in selectedItems track by x.itemID">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.itemID}}</td>
<td class="text-center">{{x.itemValue}}</td>
<td class="text-center"><input type="checkbox" /></td>
</tr>
</table>
<div>

Answer 3

Just create a directive as you don't need to repeat the code for table rendering, and use a filter to sort out the selected rows!
var app = angular.module('myApp', []);
app.directive("tableRenderer", function(){
return {
restrict: 'E',
template: `
<table style="width:50%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Item ID</th>
<th class="text-center">Item Values</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in list | filter:filter">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.itemID}}</td>
<td class="text-center">{{x.itemValue}}</td>
<td class="text-center"><input type="checkbox" ng-model="x.selected" ;/></td>
</tr>
</table>
`,
scope: {
list: '=',
filter: '='
},
link: function(scope, elem, attr) {
}
}
})
app.controller("homeCtrl", function($scope) {
$scope.items = [{
itemID: 'BR063',
itemValue: 'sagsfgjkfdsffsdfsd',
selected: false
}, {
itemID: 'BR06417',
itemValue: '1231231231123',
selected: false
}];
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<div ng-app='myApp' ng-controller="homeCtrl">
<h1>Select Rows</h1>
<table-renderer list="items"></table-renderer>
<h1>Selected Rows</h1>
<table-renderer list="items" filter="{selected: true}"></table-renderer>
<div>