Component - Dual List directive in AngularJs and Bootstrap.
MIT License
bower install excalibur-duallist --save
<script type="text/javascript" src="/bower_components/excalibur-duallist/dist/js/excalibur-duallist.min.js"></script>
<link rel="stylesheet" href="/bower_components/excalibur-duallist/dist/css/excalibur-duallist.min.css">
Then refer to your module
var app = angular.module('app', ['excaliburDualList']);
$scope.myModel = {selectItem: {}};
$scope.options = {
title: {label: 'Demo: your title', helpMessage: 'Demo: your help message'},
selectOptions: {initialText: "ALL", isDisable: false, uppercase: true},
boxItemsHeight: 'md',
items: [
{ 'category': 'FF8', 'name': 'Squall Leonhart' },
{ 'category': 'FF8', 'name': 'Quistis Trepe' },
{ 'category': 'FF8', 'name': 'Zell Dincht' },
{ 'category': 'FF9', 'name': 'Zidane' },
{ 'category': 'FF9', 'name': 'Garnet' },
{ 'category': 'FF9', 'name': 'Vivi' },
{ 'category': 'FF7', 'name': 'Cloud Strife' },
{ 'category': 'FF7', 'name': 'Aerith Gainsborough' },
{ 'category': 'FF7', 'name': 'Vincent Valentine' },
],
itemsOrderProperty: '[category, name]',
categories: ["FF7", "FF8", "FF9"],
button: {leftText: "Move All" , rightText: "Move All"},
selectedItems: []
};
<excalibur-dual-list ng-model='myModel.selectItem' options="options"> </excalibur-dual-list>
"version": 3.3.7
"version": 1.2.32
It is available under the MIT license. License