CODEWITHSUNDEEP
angularjsangular-ui-router
Markus Oley
Markus Oley

Reputation: 101

master Detail with ui-router of angular

I am new to angular and was looking for an example of a master detail. I found one: http://embed.plnkr.co/DBSbiV/App.js, but this is using angular's ngRoute. As I heard ui.route is the state of the art kind of way to handle routing due to it is more flexible.

I want to have both master and detail on one template, so I tried to solve it with multiple named views like in https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views. But I now have to problem, that I don't know how to create a link in the master list to the detail view with .. I tried with ... but don't know what to put right here, because I have only one state with multiple views.

Can you tell me whether I'm on the wrong way or what I put into this ref to link to my detail?

Thanks in advance Markus

Upvotes: 2

Views: 1541

Answers (1)

Travis Collins
Travis Collins

Reputation: 4020

You don't actually need named views for this. Just nested views. Lets imagine you have a list of blog posts. You have one state called blogs. And another state called blogs.edit, which takes a parameter of the postId.

Your blogs.html (the master list) could look something like this:

<a ng-repeat="post in blog.posts" ui-sref="blogs.edit({postId: post.Id})">{{post.title}}</a>

<div ui-view></div>

This will render a list of anchor tags, and a nested details view under.

Upvotes: 2

Related Questions