Hui’s blog

Today is not easy, tomorrow is more difficult, but the day after tomorrow will be wonderful.

Customize button text for angularjs-dropdown-mulitipselect

Recently I was using angularjs-dropdown-multiselect for multiple select. It’s a good library, but it doesn’t support customizing button text very well, so I forked it and added the customized button text feature.

The forked repository is https://github.com/dixon629/angularjs-dropdown-multiselect. It’s easy to use it, just specify buttonTextFunction in the extraSettings. It passes three parameters: options, selectedModel, settings

  1. options: the data provider of dropdown list
  2. selectedModel: the selected model of dropdown list
  3. settings: the settings of dropdown list

This is a demo: how to display “All” when you check the all items for the dropdown

function dropdownButtonTextFunction(options,selectedModel,settings){
    if(selectedModel && selectedModel.length == options.length){
        return 'All';
    }else{
        return selectedModel.length+' checked';
    }
}
$scope.myExtraSettings = {buttonTextFunction: dropdownButtonTextFunction};