javascript - 使用 Javascript 和 Angular 操作两个列表多选中的值

Question

在我看来，我有两个来自 Qquery 的列表。

 ...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...   

所以这个想法是在 Angular 代码中从正确的列表中获取值。我使用 ng-model 获取值，但它没有获取 plantId 或 planName。

Angular js 控制台

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

从 ng-model 我只得到一个包含一个元素的数组，它不是来自 ng-model="registerForm.plantTo"。我能做什么？

注意: 我从这里获得多选 JQuery 代码:http://www.jqueryrain.com/?qmi2lw8H

Answer 1

我认为你不需要 jQuery 多选插件来创建具有多个值的选择。您可以使用带有属性 multiple 的 select 并使用 AngularJs 完成其余的工作。

您可以为此创建一个指令，并让 AngularJs 存储两个列表的模型。

请查看下面或此 fiddle 中的演示.

演示中有一些表达式稍后不需要，仅用于显示所选数据。

演示类似于此 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>