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:
AngularJS - MasterDetail view <http://mikesknowledgebase.azurewebsites.net/pages/Services/WebServices-Page8.7.htm> ... and this is what my little example looks like: <https://lh6.googleusercontent.com/-goIR_WlYJwE/VFeFX7UzLCI/AAAAAAAAAXw/CVi8EIdTnvM/s1600/WebServices53.png> 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 On Sunday, August 14, 2011 3:30:59 PM UTC+2, Nolan Dubeau wrote: > > 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: > > <html xmlns="http://www.w3.org/1999/xhtml";> > <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 > > > > > > -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
