-1

I am having some difficulty getting routeParams to work for my site. I am attempting to have a list of groups displayed with the ability to select one and be routed to a page with that groups specific details. I asked a similar question yesterday but don't think I knew exactly what to ask for. The way I have it set up now I only see '/#/viewgroup/:id' in the browser instead of the actual id number and the page is blank. Thank you for the help!

ROUTES:

 .whenAuthenticated('/viewgroup/:id', {
    templateUrl: 'views/groups/groupDetail.html',
    controller: 'GroupCtrl'
  })

INDEX.HTML:

<div class="col-md-4" ng-repeat="group in data.groups | filter: filterObject | filter: search">
<div class="panel panel-default">
  <div class="panel-heading">
    <h5 class="panel-title"><a href="#viewgroup/:id">{{group.name}}</a></h5>
  </div>

GROUPDETAIL.HTML:

<div ng-show="group in data.groups">
 <ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Groups</a></li>
    <li class="active">{{group.name}}</li>
 </ol>

GROUPCTRL: I am only using the 'groups/data.json' for the data because I am not sure how to pull in this data from the firebase server. Pulling from the server is really what I need.

creativeBillingApp.controller('GroupCtrl', ['$scope', 'groupsService', '$routeParams',  function( $scope, groupsService, $firebase, $routeParams, $http) {

$http.get('groups/data.json').success(function(data){
    angular.forEach(data, function(item) {
      if (item.id == $routeParams.groupId) 
        $scope.group = item;
    });
});
Lizajean
  • 117
  • 9
  • 1
    You have a lot of moving parts in this question, which leads to my answer fixing one problem but not another. Can you set up a plunkr/fiddle/bin that reproduces a single problem at a time? – Frank van Puffelen Dec 12 '14 at 20:27
  • thanks Frank! I set up a Plunker. It's not exactly working but i believe it has all of the code I need. http://plnkr.co/edit/PKRcoO7J1B947a6I0UF3?p=preview – Lizajean Dec 15 '14 at 14:59
  • You haven't mentioned here that you are using angularFire-seed (i.e. what whenAuthenticated() is, since that's not a $routeParams method), nor does your plunkr show this code or recreate the problem. See [creating an mcve](http://stackoverflow.com/help/mcve) – Kato Dec 23 '14 at 18:14

1 Answers1

3

The :id syntax is only used in the routeProvider to indicate where it should look for the id value in the URL. In the view you use the normal {{}} or ng-bind notation to inject that id value into the generated HTML.

Assuming that your groups is the result of a $firebase(ref).$asArray() somewhere, you can access the id value of each item using $id.

So where you now have <a href="#viewgroup/:id"> in your index.html, simply put <a href="#viewgroup/{{group.$id}}">. Angular will substitute that for the group id when it renders the template.

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
  • Thank you Frank! So, I am now successfully getting the id into my browser but the template is not appearing and I am not recieving any errors in the console. – Lizajean Dec 12 '14 at 19:41
  • I fixed the groupdetail.html by adding ng-show="group in data.groups" now the template is appearing but the data is not pulling into the page. I am recieving this error; Error: [$parse:syntax] Syntax Error: Token 'in' is an unexpected token at column 7 of the expression [group in data.groups] starting at [in data.groups].. – Lizajean Dec 12 '14 at 19:53
  • 1
    The correct use of `in` is with `ng-repeat`. Using it in `ng-show="group in data.groups"` is invalid angular syntax. – Frank van Puffelen Dec 12 '14 at 20:25