Как я могу передать запись в другую таблицу в Angular? - PullRequest
Новая
       4

Как я могу передать запись в другую таблицу в Angular?

0 голосов
/ 30 августа 2018

Когда я установил флажок в первой таблице, вся строка должна отображаться во второй таблице. Здесь я сделал это жестко, но мне нужно сделать это динамически. 

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 голосов
/ 30 августа 2018

Я считаю, что это то, что вам нужно. 

    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>
0 голосов
/ 30 августа 2018

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>
0 голосов
/ 30 августа 2018

изменить функцию addRec на 

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

         $scope.selectedItems.push($scope.items[i]);
      }
      else{ 
          $scope.selectedItems.pop();
      }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...