AngularJS Example

by Terrance Smith

HTML

<div ng-controller="Ctrl3 as vm">
<dual-list-box 
  optionsLabel="Available" 
  selectionsLabel="Attending" 
  selection="item.value" 
  options="vm.getSelectOptionsByListId(vm.listItemCollections, item.listId)">
</dual-list-box>
</div>

JavaScript

function Ctrl3($scope) {
  $scope.title = 'Lorem Ipsum';
  $scope.optionsAvailable = [{
    ListText: 'option1',
    value: 'option1Val'
  }, {
    ListText: 'option2',
    value: 'option2Val'
  }, {
    ListText: 'option3',
    value: 'option3Val'
  }, ];
  $scope.optionsSelected = [

  }

  angular.module('zippyModule', [])
    .directive('zippy', function() {
      return {
        restrict: 'C',
        replace: true,
        scope: {
          title: '=zippyTitle'
        },
        link: function(scope, element, attrs) {
          // Your controller
        },
        template: '<div class="row"> < div class = "col-md-5" >
          < p > {
            {
              optionsLabel
            }
          } < /p> < select multiple size = "10"
        ng - value = "item.value" >
        < option ng - repeat = "option in options"
        value = "{{option.ListText}}" > {
          {
            option.ListText
          }
        } < /option> < /select> < /div>

        < div class = "col-md-5" >
        < button type = "button"
        class = "btn btn-default btn-lg"
        click = "moveToOptionsAvailable()" >
        < span class = "glyphicon glyphicon-arrow-left"
        aria - hidden = "true" > < /span>  < /button>

        < button type = "button"
        class = "btn btn-default btn-lg"
        click = "moveToOptionsAvailable()" >
        < span class = "glyphicon glyphicon-arrow-right"
        aria - hidden = "true" > < /span>  < /button> < /div>

        < div class = "col-md-5" >
        < p > {
          {
            selectionsLabel
          }
        } < /p> < select multiple size = "10"
        ng - value = "item.value" >
        < option ng - repeat = "option in selections"
        value = "{{option.ListText}}" > {
          {
            option.ListText
          }
        } < /option> < /select> < /div> < /div>'
      }
    });