Select2 多选下拉 ng-keypress 不起作用 [AngularJS]答案

【问题标题】：Select2 multiselect dropdown ng-keypress not working [AngularJS]Select2 多选下拉 ng-keypress 不起作用 [AngularJS]
【发布时间】：2018-02-27 02:05:52
【问题描述】：

我将在按键上加载下拉内容，而不加载所有内容。但是在这里我的 loadcourses() 函数没有被触发。

HTML：

<select id="mySelect" class="form-control select2 comboBox" multiple="multiple" ng-model="courses" ng-keypress="loadcourses()">
  <option ng-repeat="value in coursesList" value={{value.Name}}>
        {{value.Name}}
  </option>
</select>

AngulaJS 代码：

$scope.loadcourses = function () {
    console.log('loading from remote server');
}

【问题讨论】：

此函数仅在您单击下拉菜单然后按任意键时触发。

标签： angularjs jquery-select2

【解决方案1】：

试试这个代码

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

  $scope.loadcourses = function() {
    $scope.coursesList = [{
        id: '1',
        name: 'Option A'
      },
      {
        id: '2',
        name: 'Option B'
      },
      {
        id: '3',
        name: 'Option C'
      }
    ]
    console.log('loading from remote server');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body >
  <div ng-app="myApp" ng-controller="myCtrl">
    <div tabindex="0" ng-keypress="loadcourses()">
      <select id="mySelect" class="form-control select2 comboBox" multiple="multiple" ng-model="courses">
  <option ng-repeat="value in coursesList" value={{value.name}}>
        {{value.name}}
  </option>
</select>
    </div>
  </div>
</body>

【讨论】：

【解决方案2】：

使用ng-init 而不是ng-keypress，因此DOM 将仅在<select> 标签上加载课程列表数组

<select id="mySelect" class="form-control select2 comboBox" multiple="multiple" ng-model="courses" ng-init="loadcourses()">
  <option ng-repeat="value in coursesList" value={{value.Name}}>
        {{value.Name}}
  </option>
</select>

【讨论】：