Is there any way to implement select all option in lumx Select?

Question

I am currently using lumx Select with multiple choices in my angular material application. I have to implement a 'select all' option in the select to select all the values in the dropdown.

I referred the documentation for angular select but can't able to find whether it has native support for 'select all' option. Doc : Lumx Select

Answer 1

From the docs you referenced, the distinction between selected and not selected items is given by two attributes: ng-model="vm.selectModel.selectedPeople" and lx-choices="vm.selectPeople" .

So basically you would have to create an "All" option to include in lx-choices ( vm.selectPeople in this case) and then detect when it's selected. This can be done invoking a function in your controller:

HTML:

<lx-select ... lx-multiple="true" change="$scope.selectCallback(newValue, oldValue)">

Controller

vm.selectCallback = selectCallback;
function selectCallback(_newValue, _oldValue) {
    console.log('Old value: ', _oldValue);
    console.log('New value: ', _newValue);
    if (_newValue == 'all')
       vm.selectModel.selectedPeople = vm.selectPeople.slice()

}

Notice in the function we detect the "All" option and change the model accordingly.

See my fork from someone's select example with that feature implemented: https://jsfiddle.net/Khullah/wyfcy6ko/1/