how can i remove perticular row in my table using with angular js

问题: My requirement is , I am checking two check boxes in 1st table those records are adding in 2nd table this is fine, But if unchecked record removing as improper way , ho...

问题:

My requirement is , I am checking two check boxes in 1st table those records are adding in 2nd table this is fine, But if unchecked record removing as improper way , how can i remove exact row i unchecked, any expert can help me , Thanks, In Advanced.

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>


回答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>


回答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>


回答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>

  • 发表于 2018-09-02 19:15
  • 阅读 ( 277 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除