Angularjs下拉多选问题答案

【问题标题】：Angularjs dropdown multiselect issuesAngularjs下拉多选问题
【发布时间】：2016-05-30 06:29:59
【问题描述】：

总结：

我正在使用 angularjs-dropdown-multiselect 指令。

面临的问题：

问题 1： 当用户从下拉列表中选择或取消选择选项时，我想使用 onItemSelect 和 onItemDeselect 事件。

我成功配置了它们，但问题是如果没有选择任何选项，这些事件也会频繁执行。

HTML

<div ng-dropdown-multiselect="" options="listClientCompany" selected-model="selectedClients" extra-settings="clientSelectionSettings" translation-texts="translations" events="onItemSelect(selectedClients);onItemDeSelect(selectedClients)"></div>

控制器：

$scope.selectedClients = []; 
$scope.clientSelectionSettings = {idProp: '_id',displayProp:'name',externalIdProp : "_id",enableSearch:false,scrollableHeight: '200px',scrollable:true};   
$scope.translations = {buttonDefaultText: 'Select'};

$scope.onItemSelect = function(item) {
  console.log(item); // execute multiple times on page load also without selecting any option from the dropdown.
}

截图：

我也尝试了这里定义的解决方案：

https://github.com/dotansimha/angularjs-dropdown-multiselect/issues/39。但是没有成功。

问题 2： 当我从控制器中删除 $scope.selectedClients = []; 时，它会在控制台中给我这个错误。

Error: [$interpolate:interr] Can't interpolate: {{getButtonText()}} 
TypeError: Cannot read property 'length' of undefined
http://errors.angularjs.org/1.2.19/$interpolate/interr?p0=%7B%7BgetButtonTe…%A0&p1=TypeError%3A%20Cannot%20read%20property%20'length'%20of%20undefined
    at http://0.0.0.0:9000/bower_components/angular/angular.js:78:12
    at Object.$interpolate.fn (http://0.0.0.0:9000/bower_components/angular/angular.js:8756:26)
    at Scope.$digest (http://0.0.0.0:9000/bower_components/angular/angular.js:12426:40)
    at Scope.$apply (http://0.0.0.0:9000/bower_components/angular/angular.js:12699:24)
    at done (http://0.0.0.0:9000/bower_components/angular/angular.js:8287:45)
    at completeRequest (http://0.0.0.0:9000/bower_components/angular/angular.js:8499:7)
    at XMLHttpRequest.xhr.onreadystatechange (http://0.0.0.0:9000/bower_components/angular/angular.js:8438:11) angular.js:9959

我也尝试了这里定义的解决方案：

https://github.com/dotansimha/angularjs-dropdown-multiselect/issues/22 但没有成功。

在这两个问题上的任何即时帮助都将是非常可观的。谢谢

【问题讨论】：

有哪些选项？对象还是值？
选项来自 api..并且工作正常。
当然，但如果它是一个对象或单个值，它就不能是一个数组

标签： angularjs angularjs-directive ng-dropdown-multiselect

【解决方案1】：

你总是将数组发送给函数你应该这样做

$scope.selectedClients = []; 
$scope.selectedClient = {};
$scope.clientSelectionSettings = {idProp: '_id',displayProp:'name',externalIdProp : "_id",enableSearch:false,scrollableHeight: '200px',scrollable:true};   
$scope.translations = {buttonDefaultText: 'Select'};

$scope.onItemSelect = function(item) {
  //then you can push your object to the array
  console.log(item); // execute multiple times on page load also without selecting any option from the dropdown.
}

和

<div ng-dropdown-multiselect="" options="listClientCompany" selected-model="selectedClient" extra-settings="clientSelectionSettings" translation-texts="translations" events="onItemSelect(selectedClient);onItemDeSelect(selectedClient)"></div>

【讨论】：