CODEWITHSUNDEEP
angularjsangular-ui-router
nilskp
nilskp

Reputation: 3127

Angular UI-router for filtered table with persistent URLs

Ok, so I have a pretty common use case. A large dataset (for now loaded in memory), which I'd like to filter to soemthing small enough to display. Each row in the table has a link that displays a modal/popup with detail information.

I was thinking of representing this as 3 nested states, the top being the filtering, the second being the table, and the third being the modal.

Any selected filter option should be displayed in the URL, so a particular filter can be reloaded or emailed to someone else to see.

However, I'm unsure of how to configure this. If I define the query parameters on the table state, I cannot access them from the filter state, which is needed to pre-populate the filter properties on reload. But if I add them on the filter controller, I don't have a URL to trigger the table (which could be done programmatically of course), nor does it seem possible to have two-way binding between the form and the URL.

Anyway, I'm open to suggestions on how to structure this very common use case.

Upvotes: 1

Views: 278

Answers (1)

Mike Johnson
Mike Johnson

Reputation: 46

I am trying to solve this problem without modals. In your case, if a user landed on your site with a specific URL to view the detail, you would need to trigger the modal. That might cause some UI issues. What about using an expanded table cell? Look at the footable.

How to build the URL: If I pass the filter in the URL prior to load, this can trigger the filter, but this is not a solution I want.

My other thought was to use html5 mode and $location. then have a $watch function as a listener for changes. After a quick google search and a lucky click, I found this blog: http://johan.driessen.se/posts/Manipulating-history-with-the-HTML5-History-API-and-AngularJS

Upvotes: 0

Related Questions