AngularJS dynamic routing from index to detailed page

Question

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:

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:

Master detail example in Angular/Firebase: jsfiddle.net/katowulf/m6spubtp — Kato
– Kato, Commented Sep 26, 2016 at 23:54

CambridgeMike · Accepted Answer · 2016-09-26 20:56:17Z

1

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.

answered Sep 26, 2016 at 20:56

CambridgeMike

4,6421 gold badge31 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

isherwood · Accepted Answer · 2016-09-26 21:04:22Z

1

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.

answered Sep 26, 2016 at 21:04

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

1 Comment

Livi17 Over a year ago

I tried this, but it just sends me to the .otherwise({redirectTo: '/'}); What am I supposed to have in my go() function?

Fowotade Babajide · Accepted Answer · 2016-09-27 07:03:01Z

1

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

edited Sep 27, 2016 at 7:03

answered Sep 26, 2016 at 21:18

Fowotade Babajide

4573 silver badges9 bronze badges

2 Comments

Livi17 Over a year ago

I tried this, however, the uid is coming up undefined when I console.log($location.path( path + "/" + uid )); The console reads:

LocationHashbangUrl {$$protocol: "http", $$host: "localhost", $$port: 9000, $$path: "/events/show/undefined", $$search: Object…}

The url in address bar is: http://localhost:9000/#/events/show/undefined

Fowotade Babajide Over a year ago

@livi1717 It's undefined, because uid doesn't exist, it's just an example for you. uid or id is an identifier, for example, in your database you have a dynamic key like -Knxxxxxxxxxx, you can then pass it to the url like http://localhost:9000/#/events/show/-Knxxxxxxxxxxx, with that id, you will be able to query your database, to get results under the firebase dynamic keys.

Collectives™ on Stack Overflow

AngularJS dynamic routing from index to detailed page

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related