我想从list.html页面获取id并使用相同的id在list-detail.html页面上显示详细信息。我刚刚开始使用angularjs。我无法根据id显示详细信息。这是我的代码: 索引.html
<body ng-app="myAppnew">
<h1>Friends</h1>
<section ui-view></section>
</body>
列表.html
<ol>
<ul ng-repeat="friend in friends">
<a ui-sref="listDetail({Id: friend.id})">{{friend.name}}</a>
</ul>
</ol>
列表详细信息.html
<h1>Friend Detail</h1>
{{id}}<br />
{{name}}<br />
{{imageLocation}}<br />
app.js
var myApp = angular.module('myAppnew', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('list', {
url: '/',
templateUrl: 'list.html',
controller: 'mainCtrl'
})
.state('listDetail', {
url: '/:Id',
templateUrl: 'list-detail.html',
controller: 'mainCtrl'
});
});
myApp.controller('mainCtrl', function($scope, $stateParams,$http) {
console.log(arguments);
$http.get("http://www.fashto.in/rest/getmaincategories").then(function (response)
{
$scope.friends = response.data;
});
function findFriend(id){
var targetFriend = null;
$scope.friends.forEach(function(friend){
console.log("Test",friend.id,id,friend.id === id)
if (friend.id === id) targetFriend = friend;
});
return targetFriend;
}
function list($scope, $stateParams) {
var friend = findFriend(parseInt($stateParams.Id));
angular.extend($scope, friend);
}
if ($stateParams.Id) {
list($scope, $stateParams,$http);
console.log($scope);
}
});
提前谢谢您。
最佳答案
问题是您通过函数参数传递依赖项，而这根本不需要，并且不要违反图像中 DI 的法则。
只需从列表中删除参数，并且在调用该函数时不要传递它。
function list() {
var friend = findFriend(parseInt($stateParams.Id));
angular.extend($scope, friend);
}
if ($stateParams.Id) {
list();
console.log($scope);
}
NOTE: Below description is just to pointing out what was missing in current implementation. No preferring to implement it any sense.
虽然真正的问题是在调用像 list($scope, $stateParams,$http); 这样的列表函数时； 你传递了 3 个参数，而列表函数只需要两个参数，就像 function list($scope, $stateParams) {, 您应该从任一位置添加/删除单个参数。
更新/重构代码
myApp.controller('mainCtrl', function($scope, $stateParams, $http) {
//creating promise here
var friendsPromise = $http.get("http://www.fashto.in/rest/getmaincategories").then(function(response) {
$scope.friends = response.data;
});
function findFriend(id) {
var targetFriend = null;
//wait till promise resolve
friendsPromise.then(function() {
$scope.friends.forEach(function(friend) {
if (friend.id === id)
scope.friend = friend; //set current friend.
});
});
}
function list() {
findFriend(parseInt($stateParams.Id));
}
if ($stateParams.Id) {
list();
console.log($scope);
}
});
然后在 View 上执行 {{friend}}/{{friend.id}}
关于javascript - 在angularjs中将id从一个页面传递到另一个页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36207402/