Angel Sanchez Angel Sanchez - 7 months ago 24
Javascript Question

Get all values from JQuery multiselect with Angular

I have two list from Qquery in my view.

...other code...
<select name="from[]" class="js-multiselect form-control" size="9" ng-model="registerForm.plantFrom" ng-options="i.plantId as i.plantName for i in plantsData" multiple="multiple" >
</select>

... buttons to move information both side from the list..

<select name="to[]" id="js_multiselect_to_1" class="form-control" size="9" ng-model="registerForm.plantTo" multiple="multiple">
</select>
...other code...


So the idea is that in angular code get values from right list. I get values with ng-model but it does not get the plantId or planName.

Angular js console

Object {workstationName: "d", workstationIp: "2.2.2.2", entryId: 2, plantFrom: Array[1]}


From ng-model I get only an array with one element and it is not from ng-model="registerForm.plantTo". What can I do?

Note:
I get multiselect JQuery code from here: http://www.jqueryrain.com/?qmi2lw8H

Answer

I think you don't need jQuery multiselect plugin to create a select with multiple values. You can use select with attribute multiple and do the rest with AngularJs.

You could create a directive for this and let AngularJs store the models of the two lists.

Please have a look at the demo below or in this fiddle.

There are some expression in the demo that are not required later and only there to display the selected data.

The demo is similar to this jsfiddle.

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'>" +
        "	 <select class='form-control pickListSelect' id='pickData' multiple></select>" +
        " </div>" +
        " <div class='col-sm-2 pickListButtons'>" +
        "	<button id='pAdd' class='btn btn-primary btn-sm'>" + opts.add + "</button>" +
        "      <button id='pAddAll' class='btn btn-primary btn-sm'>" + opts.addAll + "</button>" +
        "	<button id='pRemove' class='btn btn-primary btn-sm'>" + opts.remove + "</button>" +
        "	<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>