如何使用angularjs将表数据从一个tabe移动到另一个表

时间:2017-01-06 07:53:11

标签: javascript angularjs html5

我有两个表我想将一个表数据移动到其他表。我有四个按钮,右边和左边,allleft。

右btn:点击右边后btn选中的行只移到左边的表格。 AllRight btn:点击后,所有行都移动到左侧表格。

leftbtn:点击左边后btn选中的行只移到右边的表格。 Allleft btn:点击allleft btn后,所有行都移动到右侧表格。

最后,如果我点击完成btn我想显示所有名字与关闭btn。

我有从其他功能复制的代码相同的脚本,但它不起作用。请编辑我的代码。

链接:https://jsfiddle.net/rhwa1t9c/2/

    $scope.SelectedListItems = [[]]; 
    $scope.SelectedAvailItems=[];
    $scope.btnRight = function () {
                //move selected.
                angular.forEach($scope.SelectedAvailItems, function (value, key) {
                    this.push(value);
                }, $scope.SelectedListItems[$scope.selectemailIndex]);
                //remove the ones that were moved.
                angular.forEach($scope.SelectedAvailItems, function (value, key) {
                    for (var i = $scope.AvailableListItems[$scope.selectemailIndex].length - 1; i >= 0; i--) {
                        if ($scope.AvailableListItems[$scope.selectemailIndex][i].email == value.email) {
                            $scope.AvailableListItems[$scope.selectemailIndex].splice(i, 1);
                        }
                    }
                });
                $scope.SelectedAvailItems = []; 
            };

            $scope.btnAllRight = function () {
                //move all.  angular.forEach($scope.AvailableListItems[$scope.selectemailIndex], function (value, key) {
                    this.push(value);
                }, $scope.SelectedListItems[$scope.selectemailIndex]);

                //remove the ones that were moved from the source.       
                for (var i = $scope.AvailableListItems[$scope.selectemailIndex].length - 1; i >= 0; i--) {
                    $scope.AvailableListItems[$scope.selectemailIndex].splice(i, 1);
                }

            };

            $scope.btnLeft = function () {
                //move selected.
                angular.forEach($scope.SelectedSelectedListItems, function (value, key) {
                    this.push(value);
                }, $scope.AvailableListItems[$scope.selectemailIndex]);

                //remove the ones that were moved from the source container.
                angular.forEach($scope.SelectedSelectedListItems, function (value, key) {
                    for (var i = $scope.SelectedListItems[$scope.selectemailIndex].length - 1; i >= 0; i--) {
                        if ($scope.SelectedListItems[$scope.selectemailIndex][i].email == value.email) {
                            $scope.SelectedListItems[$scope.selectemailIndex].splice(i, 1);
                        }
                    }
                });
                $scope.SelectedSelectedListItems = [];

            };

            $scope.btnAllLeft = function () {

                //move over all items
                angular.forEach($scope.SelectedListItems[$scope.selectemailIndex], function (value, key) {
                    this.push(value);
                }, $scope.AvailableListItems[$scope.selectemailIndex]);

                //remove the ones that were moved from the source.           
                for (var i = $scope.SelectedListItems[$scope.selectemailIndex].length - 1; i >= 0; i--) {
                    $scope.SelectedListItems[$scope.selectemailIndex].splice(i, 1);
                }
                $scope.SelectedSelectedListItems = [];

            };


            $scope.done = function(){
                $rootScope.userData = $scope.SelectedListItemsfistname;
                $tuxModalInstance.close();

            };

1 个答案:

答案 0 :(得分:0)

我认为使用angularjs的最佳方法是进行全数据驱动编码。您的表应该由具有ng-repeat而不是静态代码的数组创建。所以你可以从左到右或从右到左移动选定的数据,从不需要关注元素。