I need assistance with routing from a list of items in my index to a detailed view page for each item.
Within my index view, there is a table that displays all the saved items from the database.
Under the actions column, there is a button that should direct me to the events/show route using the ng-click="go('events/show')"
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Title</th>
<th class="col-md-2">Actions</th>
</tr>
</thead>
<tbody>
<tr scope="row" ng-repeat="event in events | reverse | filter:filterByUID">
<td>{{event.title}}</td>
<td class="col-md-2">
<div class="btn-group" role="group" aria-label="actions">
<button class="btn btn-primary" ng-click="go('events/show')">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
</button>
<button class="btn btn-primary" ng-click="events.$remove(event)">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
The layout of the table can be seen here: https://i.sstatic.net/rC8Ra.png
In my controller, I've included:
$scope.go = function ( path ) {
$location.path( path );
};
Also, in my routes.js file, the setup is as follows:
.whenAuthenticated('/events/show', {
templateUrl: 'views/eventShow.html',
controller: 'eventShowCtrl'
})
At this stage, everything is functioning correctly.
However, I'm unsure about how to pass the event ID to the eventShow.html page so that I can identify which item was clicked in the index list and display its details?
This is how my firebase database appears: