Smart-Table icon indicating copy to clipboard operation
Smart-Table copied to clipboard

Multiple Selects (Dropdowns) customized ng-change method

Open lyxhaven opened this issue 7 years ago • 3 comments

Hi,

I have a smart table which has multiple selects (dropdowns) for filtering.

I noticed that ng-model and ng-change event have already been encapsulated in smart table for basic search/filtering.

However, what I want to achieve is to update/filter options in all other selects when I select one option in one select, based on our filtered data in the table.

For example, if we have A,B for select 1 and C, D for select 2. Our data looks like [{A,C}, {B,D}]. Then when I select A in select 1, the table will only show one record {A, C}. In this case, I want select 2 to only show C cause D is not in the table so if you select A, you are not supposed to have D to select. D should be filtered out when A is selected.

This can be done by using ng-model and ng-change. But I realized that whenever you use ng-model and select an option, the data will be all missing. But if you don't use ng-model, ng-change only will give you an error. Then I realized that st-search and st-input-event="change" have been used for ng-model and ng-change.

How can I add my own logics to st-input-event="change" ?

lyxhaven avatar Jul 05 '17 15:07 lyxhaven

I am sorry, I have not understood.

For info: The bindings of st-search does not rely on ng-model but on the dom event you specify with the attribute st-input-event (it is "input" event by default)

At any time if you want a custom logic you can create your own directive which will call the lower level table api the way you want. You can have a look at the source code of the stSearch directive for an example. There are also more example of custom search directive on the documentation website

lorenzofox3 avatar Jul 05 '17 18:07 lorenzofox3

Basically if I have 2 selects for filtering the table, I want to be able to filter the options in the second select when I choose one option in the first select. This needs to be done in ng-change method of select. But ng-change only works when you have ng-model. When I assign my data model to ng-model, the table will lose all data when I choose an option in the first select.

lyxhaven avatar Jul 05 '17 18:07 lyxhaven

I will give a more specific example here:

Say we have these as data in the table:

[ { id: 1, name: Mike, nationality: US, degree: Master }, { id: 2, name: Tom, nationality: US, degree: Bachelor }, { id: 3, name: Jack, nationality: UK, degree: PHD } ]

And we have 2 selects for filtering both "nationality" and "degree".

If I choose "US" in select #1, I will expect the table to only show record id #1 and #2. Furthermore, I will expect select #2 to only show "Master" and "Bachelor" but filtered out "PHD" cause there is no data that matches both "US" and "PHD".

lyxhaven avatar Jul 05 '17 18:07 lyxhaven