Best approach to build a DYNAMIC query-by-example form in AngularJS?

Question

I'm relatively experienced with Angular having written many directives, but I have a new requirement where I have to build a query-by-example form into which a user can enter different search criteria. My problem is that I do not know ahead of time what the possible criteria will be. This criteria information will be coming from the server via an ajax request and can differ per user. Thus I will need to dynamically construct a suitable user interface based on the information I get from the server.

I have built individual directives suitable for capturing the search criteria (for example a custom calendar control for date criteria) but I am unsure of the best approach to adding these directives to a form dynamically. Is this even possible in Angular?

I have built something like this before in jQuery but its not so clear to me how I would best do this in an 'Angular way'?

Any suggestions would be most appreciated!

Tell us what you've tried to do, why it didn't work, and how it should work. — Stewie, Jul 05 '13 at 17:08
[this post](http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background) may help. — Eliran Malka, Jul 05 '13 at 18:41

score 0 · Answer 1 · answered Jul 05 '13 at 18:07

Everything that you can express as a model-to-view projection can be implemented in AngularJS.

I think here you can make a model consisting of "query params". Each of them has name, type and data for filter builder. For example, for the "select" type a data can contain a list of all possible values to choose from.

Then you iterate through the list of "query params" with ng-repeat, rendering each control differently according to its type. That's all.

If I understood the task wrong, please provide more info.

Best approach to build a DYNAMIC query-by-example form in AngularJS?

1 Answers1