Angular $routeParams：以数组形式获取查询参数答案

【问题标题】：Angular $routeParams: get query parameter as arrayAngular $routeParams：以数组形式获取查询参数
【发布时间】：2015-04-11 08:40:21
【问题描述】：

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

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

这很糟糕。因为在第一种情况下，$routeParams.id[0] 给出了"12"，而在第二个中，它给出了"1"（"12" 的第一个字符）。

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

See in Plunker

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

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:

<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:

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;
    }
]);

编辑： 对于那些想知道的人，我想要实现的是：控制器间（或视图间）通信。用户在一个视图中选择一些项目，并在下一个视图中查看这些选定项目的详细信息。 See in Plunker.

【问题讨论】：

标签： javascript angularjs controller angular-routing query-parameters

【解决方案1】：

最好的方法是不要多次使用 id 参数，而是将你的值与另一个字符分开，并且总是得到一个数组，你就可以开始了！

脚本.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

<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>

【讨论】：

【解决方案2】：

我想知道为什么您将不同的值传递给单个 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);
  }
]);

【讨论】：