Adding dropdowns dynamically and based on selection in one dropdown select options in other

Question

I am trying to implement an advance filtering options in my ngGrid . I came across idea of Filtering in Ignite UI grid and found it very nice. I am trying to replicate it in AngularJS .

The problem can be divided in 4 parts

a) Adding dropdowns dynamically

b) Selecting options in second dropdown based on first dropdown selection

c) Giving numberField or textField or dateField as 3rd entry

d) Search

By following the approach mentioned in this question , i am able to add dropdowns dynamically and reading values from them, but i am stuck at b and c part of the question.

I am new to angular JS, can anybody suggest some idea how can i achieve it?

For part b , i am thinking of applying filters in ng-repeat , but i am not getting how can i relate the selection in first dropdown to second and for part c , i think of showing or hiding the input fields depending on selection.

For adding dropdown dynamically, there can be other approach, which might help me in solving the other parts. For now, i am exactly following same approach mentioned in the answer

Answer 1

I have not used the approach that i tried first. The idea, which lead me to answer is-

1) make a dropdown, which has all the column entries.

2) for second dropdown, use filter which used ng-model of first

3) For fields, use ng-show based on ng-model of first

4) Wrap up above 3, inside an ng-repeat, and make the models of above 3 unique using approach mentioned here