I need help figuring out how to retrieve an ID from the list.html page and use that same ID to display corresponding details on the list-detail.html page. I am new to using angularjs and struggling with getting the details based on the ID. Below is my code snippet: index.html
<body ng-app="myAppnew">
<h1>Friends</h1>
<section ui-view></section>
</body>
list.html
<ol>
<ul ng-repeat="friend in friends">
<a ui-sref="listDetail({Id: friend.id})">{{friend.name}}</a>
</ul>
</ol>
list-detail.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);
}
});
Any assistance would be greatly appreciated.