如何使用Angular.js删除表格中的特定行？

时间：2018-08-30 10:44:12

标签： html angularjs

我正在检查第一个表中的两个复选框，将那些记录添加到第二个表中，这很好。但是，如果以不正确的方式删除未检查的记录，该如何删除我未检查的确切行。

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>

3 个答案:

答案 0 :(得分：0)

您只需要在$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>

答案 1 :(得分：0)

这里的问题是您试图通过索引而不是使用ID来删除。在 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>

答案 2 :(得分：0)

只需创建一个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>

相关问题
最新问题