gpt4 book ai didi

javascript - 将 id 传递到 url 以获取 angular.js 中的单个 View

转载 作者:数据小太阳 更新时间:2023-10-29 04:38:45 25 4
gpt4 key购买 nike

我正在尝试构建我的第一个 Angular 应用程序(使用一些虚拟数据)。我有一个呈现用户列表的部分,还有一个部分用于查看有关单个用户的详细信息。到个人用户的路由是基于id的。我的问题是,当我点击单个用户时,该用户 ID 没有传递到 url 中。谁能告诉我该怎么做?

应用程序.js

'use strict';


// Declare app level module which depends on filters, and services
angular.module('App', [
'ngRoute',
'App.filters',
'App.services',
'App.directives',
'App.controllers'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/users', {templateUrl: 'partials/users/user-list.html', controller: 'UsersCtrl'}).
when('/users/new', {templateUrl: 'partials/users/user-new.html', controller: 'UserNewCtrl'}).
when('/users/:userId', {templateUrl: 'partials/users/user-detail.html', controller: 'UserDetailCtrl'}).
when('/users/:userId/edit', {templateUrl: 'partials/users/user-edit.html', controller: 'UserEditCtrl'}).

otherwise({redirectTo: '/home'});
}]);

controllers.js:

'use strict';

/* Controllers */

angular.module('App.controllers', []).
controller('UsersCtrl', [function() {

}])
.controller('UserDetailCtrl', [function() {

}])
.controller('UserEditCtrl', [function() {

}])
.controller('UserNewCtrl', [function() {

}]);

用户列表.html

<body ng-controller="UserListCtrl">

<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->

</div>
<div class="span10">
<!--Body content-->

<ul class="list-group">
<h4>Users</h4>

<div ng-init="users = [
{id: 1, firstName:'John', lastName: 'Doe', email: 'johnd@gmail.com'},
{id: 3, firstName:'Jane', lastName: 'Doe', email: 'janed@gmail.com'},
{id: 4, firstName:'Donald', lastName: 'Duck', email: 'dd@disney.com'},
{id: 2, firstName:'Mary', lastName: 'Smith', email: 'ms@smiths.com'}
]">

<li class="list-group-item" ng-repeat="user in users">
<a href="#/users/:userId">{{user.firstName}} {{user.lastName}}</a>
</li>
</ul>

</div>
</div>
</div>

</body>

最佳答案

注入(inject)$routeParams。此服务允许您获取 Controller 中传递的任何参数。

.controller('UserDetailCtrl', function($scope, $http, $routeParams) {
var userId = $routeParams.userId;
// your code here.
});

.controller('UserDetailCtrl', ['$scope', '$http', '$routeParams', function(scope, http, routeParams) {
var userId = routeParams.userId;
// your code here.
}]);

JSFiddle

关于javascript - 将 id 传递到 url 以获取 angular.js 中的单个 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21256947/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com