将数据表格移动到AngularJS中的表格

Question

将数据表格移动到AngularJS中的表格

javascriptangularjs

4

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

最终移动数据后，如果我点击提交按钮，我希望以数组形式获取右侧表格的键值。

链接： 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()" />

- mahesh k

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- FenderBender · Answer 1

更新了你的 Fiddle:

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' 的功能。点击时，您想移动第一个项目还是最后一个项目？

- Searching · Answer 2

请查看注释

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