<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script data-require="angular-route@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
(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;
}
]);
})();
/* Styles go here */
When I have multiple `id` parameters in query, `$routeParams.id` gives me an array.
That's great. But, if only one `id` is present in the query, I get a string.
/?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"`).
I can work this around by inserting an empty `id=` to all my links, but this is ugly.
Is type-checking in controller is my only option? If so, how do I do it?
<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>