javascript Angular $routeParams:将查询参数作为数组获取

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29575858/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 10:45:12  来源:igfitidea点击:

Angular $routeParams: get query parameter as array

javascriptangularjscontrollerangular-routingquery-parameters

提问by musa

When I have multiple idparameters in query, $routeParams.idgives me an array. That's great. But, if only one idis present in the query, I get a string.

当我id在查询中有多个参数时,$routeParams.id给我一个数组。那太棒了。但是,如果id查询中只有一个,我会得到一个字符串。

/?id=12&id=34&id=56    // $routeParams.id = ["12", "34", "56"]
/?id=12                // $routeParams.id = "12"

This is bad. Because in the first case, $routeParams.id[0]gives "12", while in the second one, it gives "1"(first char of "12").

这不好。因为在第一种情况下,$routeParams.id[0]给出"12",而在第二种情况下,它给出"1"(第一个字符"12")。

I can work this around by inserting an empty id=to all my links, but this is ugly.

我可以通过id=在我的所有链接中插入一个空来解决这个问题,但这很难看。

See in Plunker

在 Plunker 中查看

Is "type-checking in controller" my only option? If so, how do I do it?

“在控制器中检查类型”是我唯一的选择吗?如果是这样,我该怎么做?

index.html:

index.html:

<html ng-app="app">
<head>
  <script src="//code.angularjs.org/1.3.15/angular.js"></script>
  <script src="//code.angularjs.org/1.3.15/angular-route.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div ng-view></div>
</body>
</html>

home.html:

home.html:

<a href="#/?id=12">#/?id=12</a><br/>
<a href="#/?id=12&id=34&id=56">#/?id=12&id=34&id=56</a><br/>
<a href="#/?id=12&id=">#/?id=12&id=</a><br/>

<pre>id: {{id | json:0}}</pre>
<pre>id[0]: {{id[0] | json}}</pre>

script.js:

script.js:

angular.module('app', ['ngRoute'])

.config([
    '$routeProvider',
    function($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: 'home.html',
            controller: 'HomeCtrl'
        });
    }
])

.controller('HomeCtrl', [
    '$scope', '$routeParams',
    function($scope, $routeParams) {
        $scope.id = $routeParams.id;
    }
]);

EDIT:For those who wonder, what I am trying to achive is: inter-controller (or inter-view) communication. User selects some items in one view, and sees details for those selected items in the next view. See in Plunker.

编辑:对于那些想知道的人,我想要实现的是:控制器间(或视图间)通信。用户在一个视图中选择一些项目,并在下一个视图中查看这些选定项目的详细信息。请参阅 Plunker

回答by codegaze

The best way to do it is not to use id param multiple times but separate your values with another character and always get an array and you are ready to go!

最好的方法是不要多次使用 id 参数,而是将您的值与另一个字符分开并始终获得一个数组,您就可以开始了!

script.js

脚本.js

(function() {
    var app = angular.module('app', ['ngRoute']);

    app.config([
        '$routeProvider',
        function($routeProvider) {
            $routeProvider.when('/', {
                templateUrl: 'home.html',
                controller: 'HomeCtrl'
            });
        }
    ]);


    app.controller('HomeCtrl', [
        '$scope', '$routeParams',
        function($scope, $routeParams) {
            $scope.id = $routeParams.id.split('-');
        }
    ]);
})();

home.html

主页.html

<p>
    <a href="#/?id=12-34-56">#/?id=12-34-56</a> Array
</p>

<p>
    <a href="#/?id=12">#/?id=12</a> Array
</p>


<pre>id: {{id | json:0}}</pre>

<pre>id[0]: {{id[0] | json}}</pre>

回答by Olatunde Garuba

I wonder why you are passing different values to a single id. However, this should solve your problem

我想知道您为什么将不同的值传递给单个 ID。但是,这应该可以解决您的问题

angular.module('app', ['ngRoute'])

  .config([
    '$routeProvider', function($routeProvider) {
      $routeProvider.when('/', {
        templateUrl: 'home.html',
        controller: 'HomeCtrl'
    });
  }
 ])

 .controller('HomeCtrl', [
  '$scope', '$routeParams', function($scope, $routeParams) {
    $scope.id = angular.fromJson($routeParams.id);
  }
]);