Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
​
<head>
  <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.20/ui-grid.min.css" />
  <link rel="stylesheet" type="text/css" href="style/css/styles.css">
  <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
  <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.js"></script>
  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
  <script src="https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.20/ui-grid.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>
    function Service($rootScope)
        {
            this.toTableTwo = function(selectedItems)
            {
                $rootScope.$broadcast('addTableTwo', selectedItems);
                $rootScope.$broadcast('removeTableOne', selectedItems);
            };
            this.toTableOne = function(selectedItems)
            {
                $rootScope.$broadcast('addTableOne', selectedItems);
                $rootScope.$broadcast('removeTableTwo', selectedItems);
            };
        }
​
        function TableOne($scope, service)
        {
            var ctl = this;
            this.items = [
            {
                field_1: 'First',
                field_2: 'Second'
            },
            {
                field_1: 'Test',
                field_2: 'Test2'
            }];
            this.selectedItems = [];            
        
            
            this.gridOptions = {
                data: 't1.items',
                enableRowSelection: true,
                enableSelectAll: true,
                selectionRowHeaderWidth: 20,
                rowHeight: 35,
                multiSelect: true,
                onRegisterApi: function(gridApi) {
                  $scope.gridApi = gridApi;
                  gridApi.selection.on.rowSelectionChanged($scope, function(rows) {
                    angular.copy(gridApi.selection.getSelectedRows(), ctl.selectedItems);
                  });
                }
            };
            this.moveSelected = function()
            {
                service.toTableTwo(this.selectedItems);
            };
            $scope.$on('addTableOne', function(event, data)
            {
                angular.forEach(data, function(item)
                {
                    ctl.items.push(item);
                });
            });
            $scope.$on('removeTableOne', function(event, data)
            {
                angular.forEach(data, function(item)
                {
                    _.remove(ctl.items, function(cItem)
                    {
                        return item.field_1 ===
                            cItem.field_1;
                    });
                });
                _.remove(ctl.selectedItems,
                    function(cItem)
                    {
                        return true;
                    });
            });
        }
​
        function TableTwo($scope, service)
        {
            var ctl = this;
            this.items = [
            {
                field_1: 'T2 First',
                field_2: 'T2 Second'
            },
            {
                field_1: 'T2 Test',
                field_2: 'T2 Test2'
            }];
            this.selectedItems = [];
            
            
            this.gridOptions = {
                data: 't2.items',
                 enableRowSelection: true,
                enableSelectAll: true,
                selectionRowHeaderWidth: 20,
                rowHeight: 35,
                             multiSelect: true,
                onRegisterApi: function(gridApi) {
                  $scope.gridApi = gridApi;
                  gridApi.selection.on.rowSelectionChanged($scope, function(rows) {
                    angular.copy(gridApi.selection.getSelectedRows(), ctl.selectedItems);
                  });
                }
            };
            this.moveSelected = function()
            {
                service.toTableOne(this.selectedItems);
            };
            $scope.$on('addTableTwo', function(event, data)
            {
                angular.forEach(data, function(item)
                {
                    ctl.items.push(item);
                });
            });
            $scope.$on('removeTableTwo', function(event, data)
            {
                angular.forEach(data, function(item)
                {
                    _.remove(ctl.items, function(cItem)
                    {
                        return item.field_1 ===
                            cItem.field_1;
                    });
                });
                _.remove(ctl.selectedItems,
                    function(cItem)
                    {
                        return true;
                    });
            });
        }
  </script>
  <script>
    var app = angular.module('app', [ 'ui.grid', 'ui.grid.edit', 'ui.grid.selection']);
        app.controller('TableOne', ['$scope', 'service', TableOne])
         app.controller('TableTwo', ['$scope', 'service', TableTwo])
         app.service('service', ['$rootScope', Service]);
  </script>
</head>
​
<body ng-app="app">
  <div id="container">
    <div id="panels">
      <div ng-controller="TableOne as t1">
        <div>
          <div id="grid1" ui-grid="t1.gridOptions" ui-grid-edit ui-grid-selection class="grid"></div>
          {{ t1.selectedItems }}
                </div>
        <div style="display: table-cell; vertical-align: top">
          <div>
            <button ng-click="t1.moveSelected()">&gt;&gt;&gt;&gt;</button>
          </div>
        </div>
      </div>
      <div ng-controller="TableTwo as t2 ">
        <div style="display: table-cell; vertical-align: top">
          <div>
            <button ng-click="t2.moveSelected()">&lt;&lt;&lt;&lt;</button>
          </div>
        </div>
        <div>
          <div id="grid2" ui-grid="t2.gridOptions" ui-grid-edit ui-grid-selection class="grid"></div>
          {{ t2.selectedItems }}
        </div>
      </div>
    </div>
  </div>
</body>
​
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
matthewbednarskipro
0viewers