如何将记录传递到Angular中的另一个表？

时间：2018-08-30 09:44:34

标签： javascript html angularjs

当我选中第一个表中的复选框时，应在第二个表中显示整个行。在这里，我使用硬编码来完成此操作，但我需要以动态方式进行操作。

var app = angular.module('myApp',[]);
app.controller("homeCtrl", function($scope) {
    $scope.items = [{
        itemID: 'BR063',
        itemValue: '145154'
    }, {
        itemID: 'BR053',
        itemValue: '145154'
    }];
	$scope.selectedItems = [];
	 
	$scope.addRec = function(result, i){
		  if(result == true){
			  
			  $scope.selectedItems.push($scope.items[i]);
		  }
		  else{ 
			  $scope.selectedItems.pop();
		  }
	}
});
<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 :(得分：1)

将addRec函数更改为

$scope.addRec = function(result, i){
      if(result == true){

         $scope.selectedItems.push($scope.items[i]);
      }
      else{ 
          $scope.selectedItems.pop();
      }
}

答案 1 :(得分：0)

我相信这就是您所需要的。

    var app = angular.module('myApp',[]);
    app.controller("homeCtrl", function($scope) {
	    $scope.items = [{
			itemID: 'BR064',
			itemValue: '145154'
		}, {
			itemID: 'BR065',
			itemValue: '145155'
		},
		{
			itemID: 'BR066',
			itemValue: '145156'
		},
		{
			itemID: 'BR067',
			itemValue: '145157'
		},
		{
			itemID: 'BR068',
			itemValue: '145158'
		}];
		$scope.selectedItems = [];
    	
		$scope.addRec = function(result, x){
		    if(result == true){
				$scope.selectedItems.push(x);
			} else {
				if($scope.selectedItems.length){
				let idx = 0;
				$scope.selectedItems.find(function(element, i) {
			        if(element.itemValue === x.itemValue){
					    idx = i;
					}
				});
				$scope.selectedItems.splice(idx, 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, x)";/></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 :(得分：0)

1-将对象发送给函数

2-检查所选阵列中的存在性

3-删除或添加项目到数组

答案就是这个

var app = angular.module('myApp', []);
app.controller("homeCtrl", function($scope) {
  $scope.items = [{
    itemID: 'BR063',
    itemValue: '145154'
  }, {
    itemID: 'BR053',
    itemValue: '145154'
  }];
  $scope.selectedItems = [];

  $scope.addRec = function(itm) {
    let index = $scope.selectedItems.findIndex((iitt)=> {
      return itm.itemID == iitt.itemID;
    });
    if (index == -1) {
      $scope.selectedItems.push(itm);
    } else {
      $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">
      <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(x)" ;/></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>

相关问题
最新问题