javascript - 在 AngularJS 中将数据表移动到表

Question

如何使用按钮将表格行数据从一个表格移动到另一个表格。

最后移动数据后，如果我单击提交按钮，我想在数组中获取右侧表键值。

链接:http://jsfiddle.net/A6bt3/111/

J:

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))
    }
};