CODEWITHSUNDEEP
javascriptangularjs
Livi17
Livi17

Reputation: 1660

AngularJS dynamic routing from index to detailed page

I'm trying to route from an index list of items to a page that will display a detailed view of that item.

In my index view I have a table that iterates through all the items that are saved in the database.

There is a button under the actions column that will take me to events/show route using 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 table looks like this: enter image description here

In my controller I have: 

$scope.go = function ( path ) {
      $location.path( path );
    };

in my routes.js I have:

.whenAuthenticated('/events/show', {
        templateUrl: 'views/eventShow.html',
        controller: 'eventShowCtrl'
      })

Everything works so far.

However, what is unclear to me is how do I pass the event id to the eventShow.html page, so I know which item was clicked from the index list, so I can display the detailed information?

My firebase database looks like this:

enter image description here

Upvotes: 0

Views: 133

Answers (3)

Fowotade Babajide
Fowotade Babajide

Reputation: 467

One you could pass the UID(uid is just an example for user id) onClick

<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', event.UID)">
         <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>

Then in your js file

$scope.go = function ( path, uid ) {
  $location.path( path + "/" + uid );
};

.whenAuthenticated('/events/show/:eventId', {
    templateUrl: 'views/eventShow.html',
    controller: 'eventShowCtrl'
 })

Then to query firebase, say you have a field in your objects called uid, you can use startAT and endAT methods.

See here for example

And here to read more on filtering

Upvotes: 1

isherwood
isherwood

Reputation: 61073

You should use a variable in your router:

.whenAuthenticated('/events/:id', {
    templateUrl: 'views/eventShow.html',
    controller: 'eventShowCtrl'
 })

Then you can simply use the ID in your function call:

go('events/:id')

Here's a great tutorial (and I highly recommend watching all of both parts).

And you'll have nicer URLs that can be bookmarked.

Upvotes: 1

CambridgeMike
CambridgeMike

Reputation: 4622

Check out ui-router, it makes dynamic routing much easier

https://github.com/angular-ui/ui-router

But if you want to keep what you have, you should pass the event id into your path, like such

$scope.go = function ( path, event ) {
  $location.path( path + "/" + event.id );
};

.whenAuthenticated('/events/show/:eventId', {
    templateUrl: 'views/eventShow.html',
    controller: 'eventShowCtrl'
 })

and in your controller, access $stateParams.eventId to load that event.

Upvotes: 1

Related Questions