Within my menu, I have various groups listed that a user may belong to. I've set up a template page so that when a user selects one of the GROUPS from the menu, the fields in the template change accordingly.
<li><a href="#"><i class="glyphicon glyphicon-folder-open"></i>Home </a></li>
<li><a data-toggle="collapse" ng-init="getAllGroupsofUser()" data-target="#groups">My Groups</a>
<ul id="groups" class="collapse">
<li ng-repeat="group in groupsofUser" ng-controller="groupsCTRL"><a
ng-click="openPage(group)">{{group.name}}</a>
</li>
</ul>
</li>
The menu successfully displayed the Groups. I am utilizing ng-view and $routeProvider.
My $routeProvider:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller:"MyController"
})
.when('/group/:groupname', {
templateUrl: "groupTemplate.html",
controller:"groupsCTRL"
}).
otherwise({
redirectTo: '/'
});
}]);
My controller:
app.controller( 'groupsCTRL',[ '$scope', '$http' , '$location', '$routeParams' ,function($scope, $http,$location,$routeParams){
$scope.groupeName= $routeParams.groupname;
$scope.openPage = function(group) {
$scope.groupselected = group;
console.log( "group: "+$scope.groupselected.id);
location.href = "#/group/"+group.name;
}
}]);
My template:
<div class="row" >
<h1 class="page-header">Groupe {{groupeName}} </h1>
</div>
<div class="row">
{{groupselected.id}}
</div>
My issue is that while the groupeName is displayed, only the groupselected.id appears in the console (due to using
console.log( "group: "+$scope.groupselected.id);Please assist me. I need confirmation that the group was passed to the page as I will need to display information about the selected group in the next step.