I'm currently expanding my knowledge of angular (utilizing the ionic framework with phone gap included) and I'm working on developing a single application that displays a list of data. When a user clicks on an item in the list, I want to show the details for that specific item. While I have successfully displayed all the items in the list, I am facing difficulties in showing the details for a single item. The root of the issue seems to be related to $routeParams, but I'm struggling to pinpoint exactly what is causing the problem.
app.js
angular.module('app', ['ionic', 'app.controllers'])
.config(function($stateProvider, $urlRouterProvider, $routeProvider) {
.state('app.list', {
url: '/list',
views: {
'menuContent' :{
templateUrl: "templates/list.html"
}
}
})
.state('app.staff', {
url: '/staff/:staffid',
views: {
'menuContent' :{
templateUrl: "templates/staff-details.html",
controller: 'StaffDetailsCtrl'
},
}
})
});
controllers.js
.controller('FooCtrl', function($scope) {
$scope.staff = [
{ id: 1, name: 'Jim', color: 'red' },
{ id: 2, name: 'Bob', color: 'blue' },
{ id: 3, name: 'Peter', color: 'yellow' }
/*... etc... */
];
});
// Review Controller
.controller('StaffDetailsCtrl', function($scope, $routeParams) {
// Get staff
alert('yeeeees');
var id = $routeParams.staffid;
$scope.staff = $scope.staff.get(id);
});
staff-details.html
{{staff.id}}<br />
{{staff.name}}<br />
{{staff.color}}
UPDATE
Link to Plunker.