简体   繁体   English

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

[英]How can I move table data from one tabe to other table using angularjs

I have two table i want to move that one table data to other table. 我有两个表,我想将一个表数据移动到另一表。 i have four button right, allright and left, allleft. 我有四个按钮,右边,右边和左边,右边。

Right btn:after i click that right btn checked row only move to left side table. 右btn:我单击后,右btn选中的行仅移至左侧表。 AllRight btn:after i click that allright btn all row move to left side table. AllRight btn:单击该行之后,所有行都移到左侧表。

leftbtn:after i click that left btn checked row only move to right side table. leftbtn:我单击后,左侧btn选中的行仅移至右侧表。 Allleft btn:after i click that allleft btn all row move to right side table. Allleft btn:在我单击allleft btn之后,所有行都移到右侧表。

and finally if i click that done btn i want to show all firstname with close btn. 最后,如果我单击完成的btn,我想显示所有带有btn的名字。

I have code same script copied from other funtionality but it s not working.please can u edit my code. 我有从其他功能复制来的相同脚本代码,但无法正常工作。请您编辑我的代码。

link: https://jsfiddle.net/rhwa1t9c/2/ 链接: 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();

            };

I think the best way to make use of angularjs is doing total data driven coding.Your table should be created by an array with ng-repeat instead of the static code. 我认为使用angularjs的最佳方法是进行总数据驱动的编码。您的表应该由具有ng-repeat的数组而不是静态代码创建。 so you can just move the selected data from left to right or right to left,and never need concerning the element. 因此,您只需将选定的数据从左向右或从右向左移动,而无需考虑该元素。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用AngularJS将人从DropDownList(ddl在表1上)移动到另一个表(表2)? - How can I move a person from a DropDownList (the ddl is on table 1 ) to another table (table 2) using AngularJS? 将表格行从一个表格移动到另一表格-AngularJS - Move table row from one table to another - AngularJS 如何仅使用HTML计算依赖于其他表数据的表数据? - How can I calculate table data that depends on other table data using only HTML? 将焦点从表格的一列移动到另一列时,如何调用 javascript function - how can I call javascript function when move the focus from one column to another column of the table 如何将表格行数据移动到html页面模板? - how can i move table row data to html page template? 使用javascript或jquery将数据从一个表移动和删除到另一个表 - Move and delete data from one table to another table using javascript or jquery 如何使用angularjs和JSON将表数据作为HttpPost请求传递? - How can I pass table data as a HttpPost request with angularjs and JSON? Laravel 如何使用按钮将数据从表移动到另一个 - Laravel how to move data from table to another using button 如何将滚动条从表格内移到表格外? - How can I move a scrollbar from inside to outside a table? 我如何使用Angularjs和Datatables在html表中显示数据 - How can i use Angularjs and Datatables to display data in an html table
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM