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来向您展示它是如何运作的。

在角度js中实现多选下拉列表

1 个答案: