Angular $routeParams:获取查询参数作为数组
Angular $routeParams: get query parameter as array
当我在查询中有多个 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=
来解决这个问题,但这很难看。
"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.
最好的方法是不要多次使用 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>
我想知道你为什么要将不同的值传递给一个 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);
}
]);
当我在查询中有多个 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=
来解决这个问题,但这很难看。
"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.
最好的方法是不要多次使用 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>
我想知道你为什么要将不同的值传递给一个 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);
}
]);