lorenzofox3 / Smart-Table

Code source of Smart Table module: a table/grid for Angularjs
http://lorenzofox3.github.io/smart-table-website/
1.8k stars 513 forks source link

Multiple Selects (Dropdowns) customized ng-change method #784

Open lyxhaven opened 7 years ago

lyxhaven commented 7 years ago

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" ?

lorenzofox3 commented 7 years ago

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

lyxhaven commented 7 years ago

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 commented 7 years ago

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".