CODEWITHSUNDEEP
angularjsangular-material
Rafael code
Rafael code

Reputation: 299

md-select with multiple - limit amount of selected showing

When using the Angular Material md-select with multiple, every single item selected will be displayed. I have a multiple selector showing counties, and they are all supposed to be pre-selected. This results in a list containing 30+ items, not looking very nice for the page setup.

Any options that can limit the selections showing after they have been selected?

Is it somehow possible to display the md-select-text when you exceed a limit, in my case 3 or more?

Any other solutions?

Link to several codepen examples

Upvotes: 0

Views: 2472

Answers (1)

Rambler
Rambler

Reputation: 5492

There is no direct way of achieving this , but is you just want to display a limited text post selection , you can try the following using md-selected-text.

<md-select ng-model="selected" placeholder="Pick" ng-change="onChange()" md-on-open="onOpen()" multiple md-selected-text="getSelectedText()">
<!-- OPTIONS -->
</md-select>

And in JS:

$scope.getSelectedText = function() {
    console.log($scope.selected);
    if ($scope.selected !== undefined) {
        var filtered=filterSelectedItems($scope.selected); //Filter the display string over here
        return filtered
} else {
    return "Please select an item";
}
}

The ng-model selected in case of multiple mode is an array.Iterate over it and display a condensed string. Further you can put a tooltip over it to display the complete selected items.

Upvotes: 2

Related Questions