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

Question

我有两张表，我想将一张表的数据移动到另一张表。我有四个按钮，右，右，左，左。

右 btn：在我单击右 btn 选中的行后，仅移动到左侧表格。 AllRight 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();

            };

Answer 1

我认为使用 angularjs 的最佳方法是进行总数据驱动编码。您的表应该由具有 ng-repeat 的数组而不是静态代码创建。这样您就可以将所选数据从左向右或从右向左移动，而无需考虑元素。