Master/Detail type example

4,472 views
Skip to first unread message

Nolan Dubeau

unread,
Aug 14, 2011, 9:30:59 AM8/14/11
to ang...@googlegroups.com
Hi everyone,

I'm fairly new to angular and this is probably an easy question for the list to answer.  I'm repurposing the phones demo found on the angular website to try and build a master/detail type flow, but trying to persist the phone list on the left side of the page when viewing the detail.

I have 3 controllers.

pageCtrl - controls the routing of the html body
function pageCtrl($route) {
  var self = this;

  $route.when('/dashboard',
              {template: 'partials/dashboard.html',   controller: PhoneListCtrl});
  $route.when('/reports',
              {template: 'partials/report-list.html',   controller: ReportListCtrl});
  $route.when('/reports/:id',
              {template: 'partials/report-detail.html', controller: ReportDetailCtrl});
  $route.when('/dashboard/:id',
              {template: 'partials/phone-detail.html', controller: PhoneDetailCtrl});
  $route.otherwise({redirectTo: '/dashboard'});

  $route.onChange(function(){
    self.params = $route.current.params;
  });

  $route.parent(this);
}


function PhoneListCtrl($xhr) {
  var self = this;

  $xhr('GET', 'phones/phones.json', function(code, response) {
    self.phones = response;
  });

  self.orderProp = 'id';
}

function PhoneDetailCtrl($xhr) {
  var self = this;

  

 $xhr('GET', 'phones/' + self.params.id + '.json', function(code, response) {
    self.phone = response;
  });
}


My index.html file looks like this:

<head>
<title>Two-column test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body ng:controller="pageCtrl">
  <a href="/#/dashboard">Dashboard</a> | <a href="/#/reports">Reports</a>
  
<ng:view></ng:view>

  <script src="/commonassets/javascript/angular/angular.js" ng:autobind></script>
  <script src="includes/javascript/controllers.js"></script>
  <script src="includes/javascript/filters.js"></script>
</body>
</html>


Everything works fine so far and i'm able to view the dashboard and report partial.

My dashboard partial looks like this:

<h1>Dashboard</h1>
<div ng:controller="PhoneCatCtrl">
<br/>
<table border="0">
<tr>
<td valign="top">
<ul>
<li ng:repeat="phone in phones.$filter(query).$orderBy(orderProp)"><a href="/#/dashboard/{{phone.id}}">{{phone.id}}</a></li>
</ul>
</td>
<td valign="top">
<div ng:controller="PhoneDetailCtrl"></div>
</td>
</tr>
</table>
</div>

What I would like to do is have the phone detail display within right side of the table/page and the phone list remain constant on the left side of the page.  When I run this code it replaces the entire contents of the page (within <ng:view></ng:view> I beleive) with the phone detail as opposed to just replacing the right side <div ng:controller="PhoneDetailCtrl"></div>.

Any help to get this working is greatly appreciated.

Just getting into Angular and I'm hooked already!   Great work Angular team!

Nolan





Vojta Jina

unread,
Aug 15, 2011, 4:46:22 AM8/15/11
to ang...@googlegroups.com
Hi Nolan,

there is one limitation when using $route - it reloads the route (-> template, scope, everything) always when hashPath or even single parameter in hashSearch change...

In meantime (before we add this feature to $route), I can see two options:

1/ remove selected phone id from url
This would mean you lose bookmarking specific phone detail selected...
The phone detail could be inlined in the "dashboard" partial and hidden, when no phone selected.
This should be pretty easy...

2/ do it yourself without $route service
This would mean bit more coding...

Or someone else might suggest better solution :-D

All the best,
V.

Nolan Dubeau

unread,
Aug 15, 2011, 9:20:01 AM8/15/11
to ang...@googlegroups.com
Hi Vojta,

Thanks for your response.

I thought about the inline approach as well.  I'm not concerned about being able to bookmark, so i'm fine with removing out of the $routes.   Can you point me in the right direction as to how to do it inline?  would it use ng:include?  Sorry, really new at Angular.

Thanks.

Nolan


--
You received this message because you are subscribed to the Google Groups "angular" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/ZBOTHWF8lBkJ.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

Vojta Jina

unread,
Aug 15, 2011, 10:26:26 AM8/15/11
to ang...@googlegroups.com
<h1>Dashboard</h1>
Try something like this:
<div ng:controller="PhoneCatCtrl">
  <!-- list of phones -->
  <ul>
    <li ng:repeat="phone in phones.$filter(query).$orderBy(orderProp)">
      <a href ng:click="loadPhoneDetail(phone.id)">{{phone.id}}</a>
    </li>
  </ul>
  
  <!-- selected phone detail -->
  <div ng:show="selPhone">
    <h2>{{selPhone.name}}</h2>
    <p>{{selPhone.description}}</p>
  </div>
</div>

// part of the controller
function PhoneCatCtrl($xhr) {
  var scope = this;
  this.loadPhoneDetail = function(id) {
    $xhr('GET', 'phones/' + id + '.json', function(code, response) {
      scope.selPhone = response;
    });
  };
}

Nolan Dubeau

unread,
Aug 15, 2011, 4:07:23 PM8/15/11
to ang...@googlegroups.com
Hi Vojta, 

That worked like a charm.  Thanks for the code sample.

Nolan



--
You received this message because you are subscribed to the Google Groups "angular" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/3rkzFMeX82cJ.

Shane Mingins

unread,
May 30, 2013, 6:41:58 PM5/30/13
to ang...@googlegroups.com
I am new to Angular also and wished to provide a master detail type page for Albums and Photos.  This was for an existing ruby on rails application.  Anyhow, after reading many posts and getting help from a friend I have a working solution.

I wanted to be able to bookmark the detail routes too, so like /user/1/album/2/photos should show the page with the users albums on the left and the photos in the album on the right.

The trick was pulling the master list out into a partial to be included in both the album  and photo views and using ng-include and also using a service to share the album list data between the two (plus some crude caching).

Anyways ... I made an example rails app and this may help someone https://github.com/smingins/angular-rails-hacking.

If anyone looking at the code has any ideas for improvement ... let me know .. the angular code is sitting under here: https://github.com/smingins/angular-rails-hacking/tree/master/app/assets/javascripts/angular

Cheers
Shane

Mike Gledhill

unread,
Nov 3, 2014, 8:40:55 AM11/3/14
to ang...@googlegroups.com
I'm not quite sure if this'll exactly fit what you're looking for...  but here's the Master-Detail tutorial I came up with:


... and this is what my little example looks like:


It's all fairly basic stuff.

We populate a left-hand column of Customer records from a JSON web service, and when the user clicks on one, we load that customer's orders from a second web service, and get Angular to display the products in each order.


Mike
Reply all
Reply to author
Forward
0 new messages