Angular $routeParams：获取查询参数作为数组

Question

当我在查询中有多个 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

"type-checking in controller"是我唯一的选择吗？如果可以，我该怎么做？

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.

Answer 1

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

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

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

Angular $routeParams：获取查询参数作为数组

Angular $routeParams: get query parameter as array

javascript

angularjs

controller

angular-routing

query-parameters