CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Deepak Talape
Deepak Talape

Reputation: 997

Add or Remove selected elements from multi select box using angular js

I want to display one dynamic table, But table columns I want to select at run time. For that purpose I have taken two multi select box, in first Multi select am loading all column names using Json.

Now my requirement is, I want add selected column names from first multi select box to second multi select box. And if required I also want to remove from second multi select box.

I have taken two buttons, one for adding and other for removing. Can any one help me with this requirement. How can I do it using AngularJs? please refer attached image to clear with my requirement.enter image description here Thank in advance..

Upvotes: 2

Views: 5709

Answers (1)

K Scandrett
K Scandrett

Reputation: 16541

angular.module('app', []).controller('MoveCtrl', function($scope) {

  $scope.available = [];
  $scope.selected = [];

  $scope.moveItem = function(items, from, to) {

    angular.forEach(items, function(item) {
      var idx = from.indexOf(item);
      from.splice(idx, 1);
      to.push(item);
    });

    // clear selection
    $scope.available = "";
    $scope.selected = "";
  };

  $scope.moveAll = function(from, to) {

    angular.forEach(from, function(item) {
      to.push(item);
    });
    from.length = 0;
  };

  $scope.selectedclients = [];
  $scope.availableclients = [{
    id: 1,
    name: 'Bob'
  }, {
    id: 2,
    name: 'Sarah'
  }, {
    id: 3,
    name: 'Wayne'
  }, {
    id: 4,
    name: 'Pam'
  }];

});
input {
  display: block;
  margin: 0 auto;
}
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script data-require="[email protected]" data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
  <link href="style.css" rel="stylesheet" />
  <script src="script.js"></script>
</head>

<body ng-controller="MoveCtrl">
  <h1>Move items between Select boxes</h1>

  <div style="float:left">
    <div>Available Clients</div>
    <div>
      <select size="5" multiple ng-model="available" ng-options="client as client.name for client in availableclients" style="width: 100px;height:100px"></select>
    </div>
  </div>
  <div style="float:left; width: 100px; text-align:center">
    <div>&nbsp;</div>
    <input id="moveright" type="button" value=">" ng-click="moveItem(available, availableclients,selectedclients)" />
    <input id="moverightall" type="button" value=">>" ng-click="moveAll(availableclients,selectedclients)" />
    <input id="move left" type="button" value="<" ng-click="moveItem(selected, selectedclients,availableclients)" />
    <input id="moveleftall" type="button" value="<<" ng-click="moveAll(selectedclients,availableclients)" />
  </div>

  <div style="float:left">
    <div>Selected Clients</div>
    <div>
      <select size="5" multiple ng-model="selected" ng-options="client as client.name for client in selectedclients" style="width: 100px;height:100px"></select>
    </div>
  </div>
  <div style="clear:both">
    <br/>
    <div>Selected Clients: {{selectedclients}}</div>
    <div>Available Clients: {{availableclients}}</div>
    <div>Selected: {{selected}}</div>
    <div>Available: {{available}}</div>
  </div>
</body>

</html>

Credit goes to AngularJS moving items between two select list for the base. However, it would only move single items when multiple items are selected.

Upvotes: 2

Related Questions