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

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

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 param，而是将你的值与另一个角色分开，并且总是得到一个数组，你就可以开始了！

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

Answer 3

对我来说，最简单的方法是测试$routeParams.id是否为数组。

(function() {
  var app = angular.module('app', ['ngRoute']);

  app.config([
    '$routeProvider',
    function($routeProvider) {
      $routeProvider.when('/', {
        template: '<p><a href="#/?id=12&id=34&id=56">#/?id=12&id=34&id=56</a> Array</p><p><a href="#/?id=12">#/?id=12</a> String</p><p><a href="#/?id=12&id=">#/?id=12&id=</a> Array (ugly workaround)</p><pre>id: {{id | json:0}}</pre><pre>id[0]: {{id[0] | json}}</pre>',
        controller: 'HomeCtrl'
      });
    }
  ]);


  app.controller('HomeCtrl', [
    '$scope', '$routeParams',
    function($scope, $routeParams) {
      if (undefined !== $routeParams.id) {
        $scope.id = Array.isArray($routeParams.id) ? $routeParams.id : [$routeParams.id];
      }
    }
  ]);
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script>

  
  <body ng-app="app">
    <div ng-view></div>
  </body>

https://plnkr.co/edit/DdZjyhW50CG202y57yNU

Angular $ routeParams：将查询参数作为数组

3 个答案: