具有持久URL的过滤表的Angular UI-router

时间:2014-09-05 00:15:01

标签: angularjs angular-ui-router

好的,所以我有一个非常常见的用例。一个大型数据集(现在加载到内存中),我想过滤到足够小的东西来显示。表中的每一行都有一个链接,显示带有详细信息的模态/弹出窗口。

我想把它表示为3个嵌套状态,顶部是过滤,第二个是表,第三个是模态。

任何选定的过滤器选项都应显示在网址中,以便可以重新加载或通过电子邮件将特定过滤器发送给其他人查看。

但是,我不确定如何配置它。如果我在表状态上定义查询参数,我无法从过滤器状态访问它们,这是在重新加载时预先填充过滤器属性所需的。但是,如果我将它们添加到过滤器控制器上,我没有用于触发表的URL(当然可以通过编程方式完成),也不可能在表单和URL之间进行双向绑定。 / p>

无论如何,我愿意接受有关如何构建这个非常常见的用例的建议。

1 个答案:

答案 0 :(得分:0)

我试图在没有模态的情况下解决这个问题。在您的情况下,如果用户使用特定URL登陆您的网站以查看详细信息,则需要触发模式。这可能会导致一些UI问题。那么使用扩展的表格单元呢?看看这个足迹。

如何构建URL:如果我在加载之前在URL中传递过滤器,则可以触发过滤器,但这不是我想要的解决方案。

我的另一个想法是使用html5模式和$ location。然后有一个$ watch函数作为更改的监听器。经过快速谷歌搜索和幸运点击后,我发现了这个博客:http://johan.driessen.se/posts/Manipulating-history-with-the-HTML5-History-API-and-AngularJS