Идентификатор группы не отображается в HTML при использовании routeProvider

Question

У меня возникли трудности с настройкой routeParams для работы на моем сайте. Я пытаюсь отобразить список групп с возможностью выбрать одну и перенаправить на страницу с конкретными сведениями о группах. Я задал похожий вопрос вчера, но не думаю, что точно знал, о чем просить. То, как я это настроил сейчас, я вижу только "/#/viewgroup/:id" в браузере вместо действительного номера идентификатора, и страница пуста. Спасибо вам за помощь!

МАРШРУТЫ:

 .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: я использую только "groups/data.json" для данных, потому что я не уверен, как получить эти данные с сервера firebase. Вытащить с сервера действительно то что мне нужно.

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;
    });
});

Answer 1

:id синтаксис используется только в routeProvider, чтобы указать, где он должен искать id значение в URL. В представлении вы используете нормальный {{}} или же ng-bind нотация, чтобы ввести это id значение в сгенерированный HTML.

Предполагая, что ваш groups является результатом $firebase(ref).$asArray() где-то вы можете получить доступ к значению идентификатора каждого элемента, используя $id,

Итак, где у вас сейчас есть <a href="#viewgroup/:id"> в вашем index.html, просто <a href="#viewgroup/{{group.$id}}">, Angular заменит это для идентификатора группы, когда будет отображаться шаблон.