html条件查询的页面,如何在 url 中记录页面搜索条件
问题描述
在一个页面,有很多搜索选项,比如十几个。假设全部都有选中,那么查询参数就会有十几个。我想把这些参数都放到 url 上,这样即使页面刷新也能还原之前的搜索条件。
我用的是 angular(1.2.5) + ui-router(0.2.18) 来做的,目前的代码是这样的
贴代码
// config
angular.module('app').config(configRouter);
function configRouter($locationProvider, $urlRouterProvider, $stateProvider) {
$locationProvider.html5Mode(false);
$urlRouterProvider
.when('/', '/enter/paper/1/1/')
.when('/enter', '/enter/paper/1/1/')
.otherwise('/enter/paper/1/1/');
$stateProvider
.state('main', {
url: '/',
templateUrl: 'main.html',
controller: 'MainCtrl',
controllerAs: 'mn'
})
.state('main.enter', {
url: '^/enter',
template: '
})
.state('main.enter.paper', {
url: '^/enter/paper/:page/:sort/:audit_status/:audit_time_start/:audit_time_end/:id/:name/:publisher_id/:school_stage_id/:subject_id/:grade_id/:volume_id/:chapter_id',
templateUrl: 'enter_paper.html',
controller: 'EnterPaperCtrl',
controllerAs: 'ep'
});
}
// EnterPaperCtrl
var params = {
page: 1,
sort: 1,
audit_status: 8,
// ... 省略其他参数
};
function search() {
return EnterService.search(params).then(function(data) {
// 省略其他代码
// 使用 $state.go 可以实现修改 query 而不用刷新页面
$state.go('.', params, {notify: false});
});
}
结果是
无法进入 main.enter.paper ,原因就是设置了很多 stateParams ,但是没有给默认值, 因为那些都是可选参数。
我的期望是
最好设置路由的时候只需要这样设置
// config
$urlRouterProvider
.when('/', '/enter/paper/1/1')
.when('/enter', '/enter/paper/1/1')
.otherwise('/enter/paper/1/1');
$stateProvider
.state('main.enter.paper', {
url: '^/enter/paper/:page/:sort', // 最好是其他可选参数不用预先写在这里
templateUrl: 'enter_paper.html',
controller: 'EnterPaperCtrl',
controllerAs: 'ep'
});
// EnterPaperCtrl
var params = {
page: 1,
sort: 1,
audit_status: 8,
// ... 省略其他参数
};
function search() {
return EnterService.search(params).then(function(data) {
// 省略其他代码
// 使用 $state.go 可以实现修改 query 而不用刷新页面
$state.go('.', params, {notify: false});
});
}
还有之所以不用 location.href 是因为这个会刷新页面,不知各位有什么好办法?
html条件查询的页面,如何在 url 中记录页面搜索条件相关推荐
- 【.Net】C# 将Access中时间段条件查询的数据添加到ListView中
一.让ListView控件显示表头的方法 在窗体中添加ListView 空间,其属性中设置:View属性设置为:Detail,Columns集合中添加表头中的文字. 二.利用代码给ListView添加 ...
- Microsoft Word 教程:如何在 Word 中更改页面方向、为页面添加边框?
欢迎观看 Microsoft Word 教程,小编带大家学习 Microsoft Word 的使用技巧,了解如何在 Word 中更改页面方向.为页面添加边框. 将页面方向更改为横向或纵向,在 word ...
- PDF新建空白页,如何在PDF中添加页面
使用文件的时候如果文件的内容不够完整我们就需要在文件中进行添加,不够PDF文件需要先新建空白页面之后才能在页面上输入内容,今天小编就为大家分享几个PDF新建页面的方法吧! 操作软件:PDF编辑器htt ...
- 机器学习之网格搜索技术,如何在Auto-sklearn中应用网格搜索技术
文章目录 一,机器学习中的网格搜索技术是怎么回事 二,通俗解释 三,在一般情况下使用网格搜索技术 四,GridSearchCV网格搜索技术的原理 五,如何在Auto-sklearn中使用网格搜索技术 ...
- 如何在SumatraPDF中设置反向搜索Latex命令行
如何在SumatraPDF中设置反向搜索Latex命令行 非常简单,在SumatraPDF菜单栏,设置-选项,输入 "D:\CTEX\WinEdt\WinEdt.exe" &quo ...
- python if语句多个条件-关于函数:如何在python中为一个if语句提供多个条件
本问题已经有最佳答案,请猛点这里访问. 所以我在用python 3.1.5编写一些代码,这些代码需要有多个条件才能发生某些事情.例子: 1 2 3 4 5def example(arg1, arg2, ...
- 如何在PDF中删除页面的两大技巧介绍
在编辑PDF文档的时候,我们除了添加页面之外,还会在其中删除一些页面.毕竟制作好的PDF文档,可能有一些页面是我们不需要的.那么,我们怎么对PDF文档进行编辑并删除其中的页面呢? 一.借助迅捷PDF编 ...
- 服务器静态页面分享微信,JS中静态页面如何实现微信分享功能
JS中静态页面如何实现微信分享功能 发布时间:2021-07-06 11:09:02 来源:亿速云 阅读:65 作者:小新 这篇文章主要介绍了JS中静态页面如何实现微信分享功能,具有一定借鉴价值,感兴 ...
- 如何在WebPart中访问页面上的其他WebPart
今天在和朋友讨论一个老外写的WebPart的时候,发现那个WebPart获取页面上的其他WebPart信息时,并不是通过标准的WebPart Connection,而是直接用代码来得到页面上另外那个W ...
最新文章
- (转)Docker volume plugin - enabled create local volume on docker host
- python中关键字参数的特点_Python中的*可变参数与**关键字参数
- Spring IoC 源码导读
- 客户端跳转代码html5,HTML5跳转小程序wx-open-launch-weapp的示例代码
- 使用客户端对象模型读取SharePoint列表数据
- 剑指offer--面试题13
- “宇宙第一大行”之 MySQL 数据库架构解密
- Linux 中Vim 命令大全
- 【Thinkphp5+Ueditor】Thinkphp5中用Ueditor无法获取内容的问题
- 学python看谁的视频比较好-python学习视频好的有哪些
- TPshop项目步骤(二)
- 假设web应用的文档根目录为MyApp,那么可以从哪里找到database.jar文件。
- Unity-黑暗之魂复刻-角色攻击
- [Solved] Pandas--TypeError: ‘bool‘ object is not iterable
- 计算机word表格求和怎么操作,Word表格编辑技巧:利用“公式”命令求和-word技巧-电脑技巧收藏家...
- 阳光保险港交所上市:年营收1200亿 市值超600亿港元
- 华为交换机配置常用命令
- Problem K. Katryoshka
- Liang-GaRy啃linux书想吐(六)
- 图像分割经典算法--《分水岭算法》(Watershed)
热门文章
- 如何在Swift中使用CoreData设置有用的自动完成UITextField
- redux引用多个中间件_如何轻松创建您的第一个Redux中间件
- soap rest_REST是新的SOAP
- 修改webpack配置,在react中使用less
- Gradle配置国内源
- python函数应用(2)
- 请查收,一份让你年薪突破20W的Python爬虫笔记!
- python基础教程博客_Python基础教程_Python入门知识
- LeetCode —— 71.简化路径(Python3)
- leetcode —— 965. 单值二叉树