将复杂对象传递给ui-sref params

时间:2014-12-25 12:54:09

标签: javascript angularjs angular-ui-router

我需要这样的构建网址: /列表筛选[状态] = 1&安培;过滤[型] = 2

我做:

链接:

<a ui-sref="list({filter: {status: 1, type:2}})">List</a>

(在params传递复杂对象,如果传递简单对象 - {filter:1} - 没关系,但我需要这个)

状态:

.state('list', {
    url:        '/list?filter',
    …
})

总的来说,我得到的网址是:

/list?filter=[object Object]

演示:http://plnkr.co/edit/wV3ieKyc5WGnjqw42p7y?p=preview

我如何解决?

1 个答案:

答案 0 :(得分:8)

UI-Router现已发货,支持 custom types params。你的掠夺者有updated and working version

所以,我们可以像这样调整状态def:

app.config(function($stateProvider) {
  $stateProvider.state('list', {
    url: 'list?{filter:CoolParam}',

正如我们所看到的,过滤器现在的类型为 CoolParam 。在这里我们将定义它:

app.config(['$urlMatcherFactoryProvider', function($urlMatcherFactory) {

  $urlMatcherFactory.type('CoolParam',
  {
     name : 'CoolParam',
     decode: function(val)  { return typeof(val) ==="string" ? JSON.parse(val) : val;},
     encode: function(val)  { return JSON.stringify(val); },
     equals: function(a, b) { return this.is(a) && this.is(b) 
                                  && a.status === b.status && a.type == b.type },
     is: function(val)      { return angular.isObject(val) 
                                  && "status" in val && "type" in val },
  })

}]);

现在是{{$stateParams}}这样的链接:

<a ui-sref="list({filter: {status: 1, type:2}})">Click me to see params</a>

将返回:

{"filter":{"status":1,"type":2}}

注意:在这种情况下,我让生活更轻松,只需将json转换为字符串。这意味着,url编码的param将如下所示:

#/list?filter=%7B%22status%22:1,%22type%22:2%7D

{"status":1,"type":2}

但我们还可以提供其他方式来表达我们的过滤器对象

检查here

还有相关的Q&amp;答:

所以,上面的解决方案很适合使用filter作为JSON。但是,如果我们必须有这样的?filter[status]=1&filter[type]=2网址,我们必须以不同的方式定义状态。必须将每个参数声明为分离的简单类型

$stateProvider.state('list2', {
    url: 'list2?state&type',
})

但在这种情况下,我们会像?status=1&type=2一样。此映射也是此plunker的一部分。