Angular Multiselect Dropdown

Question

In angular multislect, I want to show Id value in options. Right now i am showing just label value.

For eg: HTML :

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

Current Result : Alabama

Expected Result : Alabama AL

Please refer the below js fiddle Js Fiddle : https://jsfiddle.net/michaeldeongreen/22et6sao/9/

Thanks in Advance

Answer 1

First, You edit getPropertyForObject function

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

    return '';
};

Then change this

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>';
            }

And also

$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
            };