將數據表移動到AngularJS中的表格

Question

如何使用按鈕將表格行數據從一個表格移動到另一個表格。

最後移動數據後，如果我點擊提交按鈕，我想獲得一個數組中的右邊表鍵值。

鏈接：http://jsfiddle.net/A6bt3/111/

JS：

var app = angular.module('myApp', []); 
function checkBoxCtrl($scope){ 
    $scope.tableOne=[ 
     {key: '1', value: 'a'}, 
     {key: '2', value: 'b'}, 
     {key: '3', value: 'c'}, 
     {key: '4', value: 'd'} 
    ]; 

    $scope.btnRight = function() { 

    } 
    $scope.btnAllRight = function() { 

    } 
    $scope.btnLeft = function() { 

    } 
    $scope.btnAllLeft = function() { 

    } 
    $scope.submit = function() { 

    } 
}; 

HTML：

 <span>Table One</span> 
    <div ng-controller="checkBoxCtrl"> 
    <table width="400" border="1"> 
    <tr ng-repeat="data in tableOne" id="item{{data.key}}"> 
     <td width="20px"> 
      <input type="checkbox" ng-model="data.checked"> 
     </td> 
     <td>{{data.key}}</td> 
     <td>{{data.value}}</td> 
    </tr> 
    </table> 
    <br> 
     <div class=""> 
      <input id="btnRight" type="button" value=">" class="listBoxButton" ng-click="btnRight()" /> 
      <br/> 
      <input id="btnAllRight" type="button" value=">>" class="listBoxButton" ng-click="btnAllRight()" /> 
      <br/> 
      <input id="btnAllLeft" type="button" value="<<" class="listBoxButton" ng-click="btnAllLeft()" /> 
      <br/> 
      <input id="btnLeft" type="button" value="<" class="listBoxButton" ng-click="btnLeft()" /> 
     </div> 
     <span>Table Two</span> 
     <table width="400" border="1"> 
    <tr ng-repeat="data in tableOne | filter: {checked:true}"> 
     <td> <input type="checkbox" ng-model="data.checked"></td> 
     <td>{{data.key}}</td> 
     <td>{{data.value}}</td> 
    </tr> 
</table> 
    <input id="sbt" type="button" value=">" class="" ng-click="submit()" /> 

Answer 1

請查看評論

HTML：您的第二個表是tableTwo不tableone了

<table width="400" border="1"> 
    <tr ng-repeat="data in tableTwo"> 
     <td> 
     <input type="checkbox" ng-model="data.checked"> 
     </td> 
     <td>{{data.key}}</td> 
     <td>{{data.value}}</td> 
    </tr> 
    </table> 

腳本：

var app = angular.module('myApp', []); 
function checkBoxCtrl($scope) { 
    $scope.tableOne = [{ 
      key: '1', 
      value: 'a' 
     }, { 
      key: '2', 
      value: 'b' 
     }, { 
      key: '3', 
      value: 'c' 
     }, { 
      key: '4', 
      value: 'd' 
     } 
    ]; 
    $scope.tableTwo = [];//the table to be submitted 
    function removeitems(tableRef) { //revmove items from tableRef 
     var i; 
     for (i = tableRef.length - 1; i >= 0; i -= 1) { 
      if (tableRef[i].checked) { 
       tableRef.splice(i, 1); 
      } 
     } 
    } 
    $scope.btnRight = function() { 
     //Loop through tableone 
     $scope.tableOne.forEach(function (item, i) { 
      // if item is checked add to tabletwo 
      if (item.checked) { 
       $scope.tableTwo.push(item); 
      } 
     }) 
     removeitems($scope.tableOne); 
    } 
    $scope.btnAllRight = function() { 
     $scope.tableOne.forEach(function (item, i) { 
      item.checked = true; 
      $scope.tableTwo.push(item); 
     }) 
     removeitems($scope.tableOne); 
    } 
    $scope.btnLeft = function() { 
     $scope.tableTwo.forEach(function (item, i) { 
      if (item.checked) { 
       $scope.tableOne.push(item); 
      } 
     }) 
     removeitems($scope.tableTwo); 
    } 
    $scope.btnAllLeft = function() { 
     $scope.tableTwo.forEach(function (item, i) { 
      item.checked = true; 
      $scope.tableOne.push(item); 
     }) 
     removeitems($scope.tableTwo); 
    } 
    $scope.submit = function() { 
     alert(angular.toJson($scope.tableTwo)) 
    } 
}; 

Answer 2

更新您的提琴：

http://jsfiddle.net/y1zosxo6/2/

HTML: 

    <span>Table One</span> 

<div ng-controller="checkBoxCtrl"> 
    <table width="400" border="1"> 
     <tr ng-repeat="data in tableOne" id="item{{data.key}}"> 
      <td width="20px"> 
       <input type="checkbox" ng-model="data.checked"> 
      </td> 
      <td>{{data.key}}</td> 
      <td>{{data.value}}</td> 
     </tr> 
    </table> 
    <br> 
    <div class=""> 
     <input id="btnRight" type="button" value=">" class="listBoxButton" ng-click="btnRight()" /> 
             <br/> 
     <input id="btnAllRight" type="button" value=">>" class="listBoxButton" ng-click="btnAllRight()" /> 
             <br/> 
     <input id="btnAllLeft" type="button" value="<<" class="listBoxButton" ng-click="btnAllLeft()" /> 
             <br/> 
    <input id="btnLeft" type="button" value="<" class="listBoxButton" ng-click="btnLeft()" /> 
    </div> 
<span>Table Two</span> 

    <table width="400" border="1"> 
     <tr ng-repeat="data in table2 "> 
      <td> <input type="checkbox" ></td> 
      <td>{{data.key}}</td> 
      <td>{{data.value}}</td> 
     </tr> 
    </table> 

JS: 

    var app = angular.module('myApp', []); 

function checkBoxCtrl($scope){ 

    $scope.tableOne=[ 
        {key: '1', value: 'a'}, 
        {key: '2', value: 'b'}, 
        {key: '3', value: 'c'}, 
        {key: '4', value: 'd'} 
        ]; 
      $scope.table2=[]; 

      $scope.btnRight = function() { 

      } 
      $scope.btnAllRight = function() { 
      $scope.table2=$scope.tableOne; 
      $scope.tableOne=[]; 
      } 
      $scope.btnLeft = function() { 

      } 
      $scope.btnAllLeft = function() { 
      $scope.tableOne=$scope.table2; 
      $scope.table2=[]; 
      } 


    }; 

但是，我不明白'btnRight'和'btnLeft'的功能。點擊後，你想移動第一項還是最後一項？