Question

使用这个非常酷的AngularJS控件，但在限制可以选择的最大项目数方面存在问题。

http://dotansimha.github.io/angularjs-dropdown-multiselect/docs

虽然描述了很多属性和功能，但文档最多含糊不清。但经过几个小时的尝试组合设置后，我几乎可以按照需要运行它。

我希望下拉按钮显示自定义标签并显示所选项目的计数。问题是我似乎找不到任何方法来实现这个功能，并且还限制了用户可以点击的所选项目的数量。

这就是说，我没有试过看是否有可能捕获click事件并强制我想要的行为，因为控件将“smartButtonMaxItems”描述为一个旨在做到这一点的属性，限制了选定的项目。

JS

app.controller('AlphabeticController', ['$scope', '$window', function ($scope, $window){

var _this = this; // insure correct scope within callBacks to this controller
this.name = "AlphabeticController";

_this.names = [
    { 'pk': 1, 'userName': 'Priscila Gail Hane' },
    { 'pk': 2, 'userName': 'Milford Frank-Duell' },
    { 'pk': 3, 'userName': 'Wilson Albanese' },
    { 'pk': 4, 'userName': 'Aileen Hudec' }
];

// init the selected names collection
_this.oSelectedNames = [];

   // create default alphabetic list of names
this.init = function () {

    // sort names with local characgters (accent inorged)
    _this.oSortedNames = angular.copy(_this.names);
    _this.oSortedNames.sort(function (a, b) {
        return a.userName.strength - b.userName.strength || a.userName.localeCompare(b.userName);
    });

};

    this.projectSettings = {
    displayProp: 'userName',
    idProp: 'pk',
    externalIdProp: '',
    styleActive: true,
    showCheckAll: true,
    showUncheckAll: true,
    scrollable: true,
    enableSearch: true,
    keyboardControls: true,
    dynamicTitle: true,
    smartButtonMaxItems: 0,
    smartButtonTextConverter: function (itemText, originalItem) {
        return _this.oSelectedNames.length;
    }
};

this.projectText = {
    buttonDefaultText: _this.oSelectedNames.length + ' Selected Names',
    selectionCount: 0,
    selectionOf: 0,
    searchPlaceholder: 'enter name',
    dynamicButtonTextSuffix: ' Selected Names'
};

}]);

HTML

<div ng-controller="AlphabeticController as AC" ng-init="AC.init()">

<div ng-dropdown-multiselect=""
     options="AC.oSortedNames"
     selected-model="AC.oSelectedNames"
     translation-texts="AC.projectText"
     extra-settings="AC.projectSettings"
     search-filter="">
</div>

</div>

如果在“smartButtonMaxItems”属性上设置了零（0）值，则下拉按钮可正常工作，但可以选择的项目数没有上限。然而，当“smartButtonMaxItems”设置为小于names数组的值时，控件限制按钮可以选择的项目数量不再显示计数，而是显示它们自己的名称。

Demo on Fiddler

Answer 1

要限制选择，我已将selectionLimit: 2添加到this.projectSettings。我也在下面的小提琴手中定制了选择信息。希望这可以帮助你

此处Updated fiddler

ng-dropdown-multiselect，max items会破坏UI

1 个答案: