Передать сложный объект в UI-sref params

мне нужен url сборки, как это: - список?фильтр[статус]=1&фильтр[тип]=2

Я:

ссылки:

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

(передать сложный объект в params, если передать простой объект - {filter: 1} - это нормально, но мне это нужно)

состояние:

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

в общей сложности я получаю url-адрес:

/list?filter=[object Object]

демо:http://plnkr.co/edit/wV3ieKyc5WGnjqw42p7y?p=preview

как я могу исправить это?

9
angular-ui-router angularjs javascript

1 ответов

на UI-Router теперь поставляется с поддержкой custom types параметрам. Есть обновленная и рабочая версия ваш plunker.

Итак, мы можем настроить состояние 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}

но мы можем обеспечить также другие пути как выразить наш объект фильтра

проверить здесь

также связанные вопросы и ответы:

Итак, вышеуказанное решение хорошо работает с фильтром в качестве JSON. Но в случае, если мы должны иметь url, как это ?filter[status]=1&filter[type]=2, мы должны определить состояние по-разному. Каждый параметр должен быть объявлен как отдельный простой тип

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

но в этом случае у нас было бы так ?status=1&type=2. Этот отображение также является частью этого plunker.

8