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://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.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.1.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://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-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',
                selectedItems: []
            };
            this.moveSelected = function()
            {
                service.toTableTwo(this.gridOptions.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.gridOptions.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',
                selectedItems: []
            };
            this.moveSelected = function()
            {
                service.toTableOne(this.gridOptions.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.gridOptions.selectedItems,
                    function(cItem)
                    {
                        return true;
                    });
            });
        }
  </script>
  <script>
    var app = angular.module('app', ['ngGrid']);
        app.controller('TableOne', ['$scope', 'service', TableOne])
         app.controller('TableTwo', ['$scope', 'service', TableTwo])
         app.service('service', ['$rootScope', Service]);
  </script>
</head>
​
<body ng-app="app">
    <div ng-controller="TableOne as t1">
      <div style="display: table-cell;" class="gridStyle" ng-grid="gridOptiontest">
        <div>
          <table ng-grid="t1.gridOptions">
          </table>
        </div>
      </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 style="display: table-cell;" class="gridStyle" ng-grid="gridOptions">
        <div>
          <table ng-grid="t2.gridOptions">
          </table>
        </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