angular.module('demoApp', ['aw-picklist'])
.controller('mainController', mainController);
angular.module('aw-picklist', [])
.directive('pickList', PickList);
// jquery multiselect data format
// static data for demo
var val = {
01: {
id: 01,
text: 'Isis'
},
02: {
id: 02,
text: 'Sophia'
},
03: {
id: 03,
text: 'Alice'
},
04: {
id: 04,
text: 'Isabella'
},
05: {
id: 05,
text: 'Manuela'
},
06: {
id: 06,
text: 'Laura'
},
07: {
id: 07,
text: 'Luiza'
},
08: {
id: 08,
text: 'Valentina'
},
09: {
id: 09,
text: 'Giovanna'
},
10: {
id: 10,
text: 'Maria Eduarda'
},
11: {
id: 11,
text: 'Helena'
},
12: {
id: 12,
text: 'Beatriz'
},
13: {
id: 13,
text: 'Maria Luiza'
},
14: {
id: 14,
text: 'Lara'
},
15: {
id: 15,
text: 'Julia'
}
};
function mainController($window) {
var vm = this;
vm.options = {
data: val
};
vm.resultList = {};
vm.alert = function(result) {
$window.alert(JSON.stringify(result));
};
}
function PickList() {
var defaults = {};
return {
scope: {
options: '=',
result: '='
},
templateUrl: 'component/pickListTmpl.html',
link: function(scope, element, attrs) {
var opts = angular.extend({}, defaults, scope.options);
//var $el = $(element).multiselect(opts); // jquery plugin not required
function copy(pickListSelect, source, target) {
// add data to new list
var i, id;
// copy to new lsit & remove old element
for (i = 0; i < pickListSelect.length; i++) {
id = pickListSelect[i].id;
target.data[id] = target.data[id] || {};
angular.extend(target.data[id], pickListSelect[i]);
delete source.data[pickListSelect[i].id];
}
pickListSelect = [];
}
angular.extend(scope, {
pickListSelect: [],
pickListResultSelect: [],
result: {
data: {}
},
add: function() {
var id;
// copy(selection, source, target)
copy(scope.pickListSelect, scope.options, scope.result);
},
addAll: function() {
angular.merge(scope.result.data, scope.options.data);
scope.options.data = {};
},
remove: function() {
copy(scope.pickListResultSelect, scope.result, scope.options);
},
removeAll: function() {
angular.merge(scope.options.data, scope.result.data);
scope.result.data = {};
}
});
}
};
}
/*
// forked fiddle from http://www.jqueryrain.com/2016/03/picklist-jquery-multilist-picker/
(function($) {
$.fn.pickList = function(options) {
var opts = $.extend({}, $.fn.pickList.defaults, options);
this.fill = function() {
var option = '';
$.each(opts.data, function(key, val) {
option += '<option id=' + val.id + '>' + val.text + '</option>';
});
this.find('#pickData').append(option);
};
this.controll = function() {
var pickThis = this;
$("#pAdd").on('click', function() {
var p = pickThis.find("#pickData option:selected");
p.clone().appendTo("#pickListResult");
p.remove();
});
$("#pAddAll").on('click', function() {
var p = pickThis.find("#pickData option");
p.clone().appendTo("#pickListResult");
p.remove();
});
$("#pRemove").on('click', function() {
var p = pickThis.find("#pickListResult option:selected");
p.clone().appendTo("#pickData");
p.remove();
});
$("#pRemoveAll").on('click', function() {
var p = pickThis.find("#pickListResult option");
p.clone().appendTo("#pickData");
p.remove();
});
};
this.getValues = function() {
var objResult = [];
this.find("#pickListResult option").each(function() {
objResult.push({
id: this.id,
text: this.text
});
});
return objResult;
};
this.init = function() {
var pickListHtml =
"<div class='row'>" +
" <div class='col-sm-5'>" +
" \t <select class='form-control pickListSelect' id='pickData' multiple></select>" +
" </div>" +
" <div class='col-sm-2 pickListButtons'>" +
" \t <button id='pAdd' class='btn btn-primary btn-sm'>" + opts.add + "</button>" +
" <button id='pAddAll' class='btn btn-primary btn-sm'>" + opts.addAll + "</button>" +
" \t <button id='pRemove' class='btn btn-primary btn-sm'>" + opts.remove + "</button>" +
" \t <button id='pRemoveAll' class='btn btn-primary btn-sm'>" + opts.removeAll + "</button>" +
" </div>" +
" <div class='col-sm-5'>" +
" <select class='form-control pickListSelect' id='pickListResult' multiple></select>" +
" </div>" +
"</div>";
this.append(pickListHtml);
this.fill();
this.controll();
};
this.init();
return this;
};
$.fn.pickList.defaults = {
add: 'Add',
addAll: 'Add All',
remove: 'Remove',
removeAll: 'Remove All'
};
}(jQuery));
*/
/*
var val = {
01: {
id: 01,
text: 'Isis'
},
02: {
id: 02,
text: 'Sophia'
},
03: {
id: 03,
text: 'Alice'
},
04: {
id: 04,
text: 'Isabella'
},
05: {
id: 05,
text: 'Manuela'
},
06: {
id: 06,
text: 'Laura'
},
07: {
id: 07,
text: 'Luiza'
},
08: {
id: 08,
text: 'Valentina'
},
09: {
id: 09,
text: 'Giovanna'
},
10: {
id: 10,
text: 'Maria Eduarda'
},
11: {
id: 11,
text: 'Helena'
},
12: {
id: 12,
text: 'Beatriz'
},
13: {
id: 13,
text: 'Maria Luiza'
},
14: {
id: 14,
text: 'Lara'
},
15: {
id: 15,
text: 'Julia'
}
};
var pick = $("#pickList").pickList({
data: val
});
$("#getSelected").click(function() {
console.log(pick.getValues());
});
*/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<br>
<div class="container" ng-app="demoApp" ng-controller="mainController as mainCtrl">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">PickList Demo</h3>
</div>
<div class="panel-body">
<!--<div id="pickList"></div>-->
<pick-list options="mainCtrl.options" result="mainCtrl.resultList"></pick-list>
MainController resultList = {{mainCtrl.resultList}}
<br>
<br>
<button class="btn btn-primary" id="getSelected" ng-click="mainCtrl.alert(mainCtrl.resultList)">Get Selected</button>
</div>
</div>
<script type="text/ng-template" id="component/pickListTmpl.html">
<div class="row">
<div class="col-sm-5">
<select class="form-control pickListSelect" id="pickData" multiple ng-model="pickListSelect" ng-options="data as data.text for data in options.data track by data.id">
</select>
</div>
{{pickListSelect}}
<div class="col-sm-2 pickListButtons">
<button ng-click="add()" class="btn btn-primary btn-sm">add</button>
<button ng-click="addAll()" class="btn btn-primary btn-sm">add all</button>
<button ng-click="remove()" class="btn btn-primary btn-sm">
remove
</button>
<button ng-click="removeAll()" class="btn btn-primary btn-sm">remove all
</button>
</div>
<div class="col-sm-5">
<select class="form-control pickListSelect" id="pickListResult" multiple ng-model="pickListResultSelect" ng-options="data as data.text for data in result.data track by data.id">
</select>
</div>
</div>
</script>
</div>