CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
Alex Man
Alex Man

Reputation: 4886

Angular Bootsrap Multi Select Add Remove Componenet Model

can anyone please tell me whether there is any plugin in angular, bootstrap for add remove modal component like as shown below in the picture

enter image description here

Upvotes: 2

Views: 2633

Answers (2)

Nidhish Krishnan
Nidhish Krishnan

Reputation: 20741

You can use Angularjs based ngListSelect plugin for achieving this

Working Demo

simply import

minified

<script type="text/javascript" src="https://cdn.rawgit.com/nidhishkrishnan/ngListSelect/master/ngListSelect.min.js"></script>

non-minified

<script type="text/javascript" src="https://cdn.rawgit.com/nidhishkrishnan/ngListSelect/master/ngListSelect.js"></script>

Add ngListSelect as a dependency to your app

angular.module('your-app', ['ngListSelect']);

and use the ngListSelect directive in your template like as shown below

<ng-list-select selected-list="selectedList" key="name" available-list="availableList" button-style="olive" panel-style="olive"></ng-list-select>

enter image description here

Upvotes: 4

alfrescian
alfrescian

Reputation: 4079

I don't know a ready-to-intstall module with bootstrap styling, but the basic implementation is quite simple: http://jsfiddle.net/andytjoslin/aeSaJ/3/

<div ng-app>
    <div ng-controller="fling">
    <select multiple="true" ng-model="selected" ng-options="item for item in selectedItems">
    </select>
    _________________
    <select  multiple="true" ng-model="available" ng-options="item for item in availableItems">
    </select>
        <br />
    <button ng-click="moveItem(selected[0], selectedItems, availableItems)">
        Move sel --&gt;
    </button>
    <button ng-click="moveItem(available[0], availableItems, selectedItems)"> 
        &lt;-- Move sel
    </button>
        <br />
    <button ng-click="moveAll(selectedItems, availableItems)">
        Move all --&gt; 
    </button>
    <button ng-click="moveAll(availableItems, selectedItems)">
         &lt;-- Move all
    </button>
    {{selectedItems}}
    {{availableItems}}

    </div>
</div>


function fling($scope) {

    $scope.moveItem = function(item, from, to) {
        var idx=from.indexOf(item);
        if (idx != -1) {
            from.splice(idx, 1);
            to.push(item);      
        }
    };
    $scope.moveAll = function(from, to) {
        angular.forEach(from, function(item) {
            to.push(item);
        });
        from.length = 0;
    };

    $scope.selectedItems = ['a','b','c'];
    $scope.availableItems = [1,2,3];
}

it should be easy to add bootstrap classes here.

Upvotes: 2

Related Questions