Angular 多选下拉菜单

Question

在angular 多选中，我想在选项中显示 Id 值。现在我只显示标签值。

例如： HTML :

JS : $scope.example14data = [{ "label": "Alabama", "id": "AL" }

当前结果：阿拉巴马州

预期结果：阿拉巴马州阿尔

请参考以下js fiddle Js Fiddle : https://jsfiddle.net/michaeldeongreen/22et6sao/9/

提前致谢

Answer 1

首先，您编辑 getPropertyForObject 函数

$scope.getPropertyForObject = function (object, property, property2) {
    if (angular.isDefined(object) && object.hasOwnProperty(property)) {
       return object[property] + (object[property2]?(" "+object[property2]):"");
    }

    return '';
};

然后改变这个

if (checkboxes) {
                template += '<div class="checkbox"><label><input class="checkboxInput" type="checkbox" ng-click="checkboxClick($event, getPropertyForObject(option,settings.idProp))" ng-checked="isChecked(getPropertyForObject(option,settings.idProp))" /> {{getPropertyForObject(option, settings.displayProp, settings.displayProp2)}}</label></div></a>';
            } else {
                template += '<span data-ng-class="{\'glyphicon glyphicon-ok\': isChecked(getPropertyForObject(option,settings.idProp))}"></span> {{getPropertyForObject(option, settings.displayProp, settings.displayProp2)}}</a>';
            }

还有

$scope.settings = {
                dynamicTitle: true,
                scrollable: false,
                scrollableHeight: '300px',
                closeOnBlur: true,
                displayProp: 'label',
                displayProp2: 'id',
                idProp: 'id',
                externalIdProp: 'id',
                enableSearch: false,
                selectionLimit: 0,
                showCheckAll: true,
                showUncheckAll: true,
                closeOnSelect: false,
                buttonClasses: 'btn btn-default',
                closeOnDeselect: false,
                groupBy: $attrs.groupBy || undefined,
                groupByTextProvider: null,
                smartButtonMaxItems: 0,
                smartButtonTextConverter: angular.noop
            };

Answer 2

没有我能找到的结果格式化程序。我有一个解决方法

return 结果

{"label":"Alabama","id":"AL","parsed":"Alabama AL"}

https://jsfiddle.net/22et6sao/477/

$scope.example14model = [];
$scope.example14settings = {
    scrollableHeight: '200px',
    scrollable: true,
    enableSearch: true,
    externalIdProp : ''
};

$scope.EXeVENTS = {
   onItemSelect : function(item){
     item.parsed = item.label + ' ' + item.id
   }
}

希望没问题。

Angular 多选下拉菜单

Angular Multiselect Dropdown

angularjs

bootstrap-multiselect