Как удалить конкретную строку в моей таблице с помощью Angular.js?

Question

Я проверяю два флажка в первой таблице, эти записи добавляют во вторую таблицу, это нормально. Но если удаление непроверенной записи некорректным способом, как я могу удалить точную непроверенную строку.

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

Проблема в том, что вы пытаетесь удалить с помощью индекса, а не с помощью идентификатора. Внесены некоторые изменения в функцию addRec и строку в html, вызывающую ее. Пожалуйста, пройдите их один раз:

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 2

Просто создайте directive, поскольку вам не нужно повторять код для отображения таблицы , и используйте фильтр для сортировки выбранных строк!

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>

Answer 3

Вам просто нужно сделать $scope.selectedItems.splice(i-1, 1); в блоке else. Также, поскольку result является логическим значением, вы можете просто использовать if (result) в условии:

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>