javascript - 在angular js中实现多选下拉

Question

我正在尝试在 AngularJS 中实现多选下拉列表，并尝试将值存储在我的 JS 文件的列表中。但是我无法处理选择多个值的事件。

我使用过 ng-change 但这只能处理一次点击。不处理使用 CTRL + 箭头键选择多个值。我的列表是动态生成的。

请建议使用 Javascript/AngularJS 处理它的方法

<div>
 <select multiple class="form-control drop-down" name="abclist" id="users"  ng-model="databaseUser" ng-options="databaseUser.username for databaseUser in databaseUsers" ng-change="ctrl.onchange()" required>
    <option value="" >SELECT USER VALUE</option>
  </select>
</div>

(function () {
  'use strict';

  angular.module(userdetails.module).controller('UserController', UserController);

  UserController.$inject = ['$scope', '$rootScope','$http', 'dData', '$location', '$uibModal'];
  function AdminController($scope, $rootScope, $http, dData, $location, $uibModal) {
    function onchange(){
  }

Answer 1

您不需要捕获 onChange 事件来执行此操作，ng-model 属性将为您完成这项工作。

HTML

<div ng-app="myModule">
  <div ng-controller="myController as ctrl">
    <div>
      <p>Selected users: {{ctrl.selectedUsers}}</p>
        <select multiple
                id="users"  
                ng-model="ctrl.selectedUsers" 
                ng-options="user as user.label for user in ctrl.users track by user.id">
        </select>
    </div>
  </div>
</div>

Javascript

var module = angular.module("myModule", []);

module.controller("myController", function() {
  var $ctrl = this;
  $ctrl.users = [{id:1, label:'eyp'}, {id:2, label:'jrt'}];
  $ctrl.selectedUsers = null;
});

这里有一个 JSFiddle test向您展示它是如何工作的。