http://jsfiddle.net/Nidhin/xd3Ab/
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.roles = [
{roleId: 1, roleName: "Administrator"},
{roleId: 2, roleName: "Super User"}
];
$scope.user = {
userId: 1,
username: "JimBob",
roles: [$scope.roles[0]]
};});myApp.directive('multiSelect', function($q) {return {
restrict: 'E',
require: 'ngModel',
scope: {
selectedLabel: "@",
availableLabel: "@",
displayAttr: "@",
available: "=",
model: "=ngModel"
},
template: '<div class="multiSelect">' +
'<div class="leftms fL ">' +
'<label class="control-label fL" for="multiSelectSelected">{{ availableLabel }} ' +
'({{ available.length }})</label>'+'<div class="clear"></div>'+
'<select id="multiSelectAvailable" ng-model="selected.available" multiple ' +
'class="pull-left mselect " ng-options="e as e[displayAttr] for e in available"></select>' + '<div class="clear"></div>'+
'</div>' +
'<div class=" width10p fL" >' +
'<button class="btn mover left" ng-click="add()" title="Add selected" ' +
'ng-disabled="selected.available.length == 0">' +
'<i class="icon-arrow-right clrblk">></i>' +
'</button>' +
'<button class="btn mover right" ng-click="remove()" title="Remove selected" ' +
'ng-disabled="selected.current.length == 0">' +
'<i class="icon-arrow-left clrblk"><</i>' +
'</button>' +
'</div>' +
'<div class="leftms fL">' +
'<label class="control-label fL" for="multiSelectSelected">{{ selectedLabel }} ' +
'({{ model.length }})</label>' +'<div class="clear"></div>'+
'<select id="currentRoles" ng-model="selected.current" multiple ' +
'class="pull-left mselect fL" ng-options="e as e[displayAttr] for e in model">' +
'</select>' + '<div class="clear"></div>'+
'</div>' +
'<div class=" width10p fL" >' +
'<button class="btn mover left" ng-click="up()" title="Add selected" ' +
'ng-disabled="selected.current.length == 0">' +
'<i class="fa fa-angle-up clrblk"></i>' +
'</button>' +
'<button class="btn mover right" ng-click="down()" title="Remove selected" ' +
'ng-disabled="selected.current.length == 0">' +
'<i class="fa fa-angle-down clrblk"></i>' +
'</button>' +
'</div>' +
'</div>', link: function(scope, elm, attrs) {
scope.selected = {
available: [],
current: []
};
/* Handles cases where scope data hasn't been initialized yet */
var dataLoading = function(scopeAttr) {
var loading = $q.defer();
if(scope[scopeAttr]) {
loading.resolve(scope[scopeAttr]);
} else {
scope.$watch(scopeAttr, function(newValue, oldValue) {
if(newValue !== undefined)
loading.resolve(newValue);
});
}
return loading.promise;
};
/* Filters out items in original that are also in toFilter. Compares by reference. */
var filterOut = function(original, toFilter) {
var filtered = [];
angular.forEach(original, function(entity) {
var match = false;
for(var i = 0; i < toFilter.length; i++) {
if(toFilter[i][attrs.displayAttr] == entity[attrs.displayAttr]) {
match = true;
break;
}
}
if(!match) {
filtered.push(entity);
}
});
return filtered;
};
scope.refreshAvailable = function() {
scope.available = filterOut(scope.available, scope.model);
scope.selected.available = [];
scope.selected.current = [];
};
scope.add = function() {
scope.model = scope.model.concat(scope.selected.available);
scope.refreshAvailable();
};
scope.remove = function() {
scope.available = scope.available.concat(scope.selected.current);
scope.model = filterOut(scope.model, scope.selected.current);
scope.refreshAvailable();
};
scope.update = function() {
scope.model = scope.model.concat(scope.selected.current);
//scope.model = filterOut(scope.model, scope.selected.current);
scope.refreshAvailable();
};
scope.up = function() {
var $op = $('#currentRoles option:selected');
if($op.length){
$op.first().prev().before($op);
}
$('#currentRoles').find('option').attr('selected','selected');
//scope.update();
scope.refreshAvailable();
};
scope.down = function() {
var $op = $('#currentRoles option:selected');
if($op.length){
$op.last().next().after($op);
}
//scope.add();
scope.refreshAvailable();
scope.apply();
};
$q.all([dataLoading("model"), dataLoading("available")]).then(function(results) {
scope.refreshAvailable();
});
}};})// JavaScript Document
on this link you will find two select box Available Role & Current role, I have to move item from Available Role to Current role Then Move the item Up and down in Current role Select box --- Moving Item from available role to Current role I have used angular js --- For Moving item UP and down in Current role I have used Jquery But when I am posting the value order of item is not passing in same format which is in Current role selectbox.
Pls use the fiddle.
