Multi Selection using Angular js

Question

I am having the requirement in AngularJS on Multi Select fields.

I have 2 multi select drop-downs and I need to pass the data between them through 3 buttons. I tried sample in JSFiddle but I was unable to succeed. Please find the details in the below link.

Here is the link

HTML CODE

<div ng-controller="MyCtrl"><select multiple="true" ng-model="selectedDetails" ng-options="c.name+' ('+c.id+')' for c in rule"></select>
<button ng-click='moveSelectedToRight(selectedDetails)'>></button>
 <button ng-click='moveAllSelected(selectedDetails)'>>></button>
<button ng-click='moveSelectedToLeft(selectedDetails)'><</button>
<select multiple="true" ng-model="selectedDetailsCopied" ng-options="c.name+' ('+c.id+')' for c in selectedDetailsCopied"></select>
<div>
    <p>Selected Details: {{selectedDetails }}</p>
    <p>Copied Details: {{selectedDetailsCopied}}</p>
</div>

JS CODE

    var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.selectedDetails = [];
    $scope.selectedDetailsCopied=[];
    $scope.rule = [{
        name: 'Rock',
        id: '0'},
    {
        name: 'white',
        id: '1'},
    {
        name: 'Test',
        id: '2'},
    {
        name: 'Fun',
        id: '3'},
    {
        name: 'Laaa',
        id: '4'
    }];
$scope.moveSelectedToRight = function(selectedDetails){
        $scope.selectedDetailsCopied = angular.copy(selectedDetails);
    }
    $scope.moveAllSelected = function(selectedDetails){
        $scope.selectedDetailsCopied = angular.copy($scope.rule);
    }
     $scope.moveSelectedToLeft = function(selectedDetails){
        $scope.selectedDetailsCopied = [];
    }


}

But your fiddle (may be they missed to include angular js file) is working ! Did you get any error ?? — Tasnim Reza
– Tasnim Reza, Commented Oct 27, 2015 at 12:10
I was able to run my code snippet. But after sharing the code it was not compiled properly. Please use the above code for reference @Reza — Kartheek Sarabu
– Kartheek Sarabu, Commented Oct 27, 2015 at 12:27

Emir Marques · Accepted Answer · 2015-10-28 10:49:19Z

Look this

var myApp = angular.module('myApp', []);

    function MyCtrl($scope) {
        $scope.selectedDetails = [];
        $scope.selectedDetailsCopied = [];
        $scope.rule = [{
               name: 'Rock',
               id: '0'},
           {
               name: 'white',
               id: '1'},
           {
               name: 'Test',
               id: '2'},
           {
               name: 'Fun',
               id: '3'},
           {
               name: 'Laaa',
               id: '4'
           }];
                        
            $scope.moveSelectedToRight = function(){
                angular.forEach($scope.selectedDetails, function(value, key) {
                    var indexEl = $scope.geIndex($scope.rule, value);
                    $scope.selectedDetailsCopied.push($scope.rule[indexEl]);
                });

                angular.forEach($scope.selectedDetails, function(value, key) {
                    var indexEl = $scope.geIndex($scope.rule, value);
                    $scope.rule.splice(indexEl, 1);
                });
                
                while($scope.selectedDetails.length > 0)
                    $scope.selectedDetails.splice(0, 1);
            }
            $scope.moveAllSelected = function(){
                angular.forEach($scope.rule, function(value, key) {
                    $scope.selectedDetailsCopied.push(value);
                });

                while($scope.rule.length > 0)
                    $scope.rule.splice(0, 1);
            }
            $scope.moveSelectedToLeft = function(){
                angular.forEach($scope.selectedDetailsMoved, function(value, key) {
                    var indexEl = $scope.geIndex($scope.selectedDetailsCopied, value);
                    $scope.rule.push($scope.selectedDetailsCopied[indexEl]);
                }); 

                angular.forEach($scope.selectedDetailsMoved, function(value, key) {
                    var indexEl = $scope.geIndex($scope.selectedDetailsCopied, value);
                    $scope.selectedDetailsCopied.splice(indexEl, 1);
                });  
            }
            
            $scope.geIndex = function(arr, idElement){
                var itemIndex = {};
                angular.forEach(arr, function(value, key) {
                    if(value.id == idElement || value == idElement){
                        itemIndex = key;
                        return false;
                    }
                });
                return itemIndex;
            }
        }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
    
    <select multiple="true" ng-model="selectedDetails" ng-options="c.id as c.name for c in rule"></select>
    <button ng-click='moveSelectedToRight(selectedDetails)'>></button>
    <button ng-click='moveAllSelected(selectedDetails)'>>></button>
    <button ng-click='moveSelectedToLeft(selectedDetailsMoved)'><</button>
    <select multiple="true" ng-model="selectedDetailsMoved" ng-options="c.id as c.name for c in selectedDetailsCopied"></select>
    <div>
        <p>Selected Details: {{selectedDetails }}</p>
        <p>Copied Details: {{selectedDetailsCopied}}</p>
    </div>
</div>

Thanks for your reply and the small issue here is I was unable to move multiple items from both sides.

Collectives™ on Stack Overflow

Multi Selection using Angular js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related