How to use Routeprovider to toggle sections?

Question

I have what I'm hoping is a simple problem.

Let's say I have a JSON object which is the data for the url /page-b

{
    "name": "Page B",
    "url": "page-b",
    "sections": [{
        "name": "A",
        "description": "Foo",
    }, {
        "name": "B",
        "description": "Bar",
    }, {
        "name": "C",
        "description": "Dog"
    }, {
        "name": "D",
        "description": "Cat",
    }]
}

Each page has a different JSON file it goe's and grabs, but for this example, I'll run it on B.

dashboard.controller('siteCtrl', ['$scope', '$http', '$rootScope', '$location', function($scope, $http, $rootScope, $location) {

  $rootScope.location = $location.path();

  var url = '';
  switch($rootScope.location) {
    case '/':
    case '/page-a':
      url = '/data/page-a.json';
    break;
    case '/page-b':
      url = '/data/page-b.json';
    break;
    case '/page-c':
      url = '/data/page-c.json';
    break;
  }

  $http.get(url).success(function(data){ 
    $scope.brandData = data;
  });

}]);

Simple route provider, that get's the pages from the hash key. I have this simple menu, which I do not have control over the html at all, but I want to toggle the SECTIONS in the json object, instead of displaying them all, there's a click event on the page-b root page, but I'm not sure how I can find out which child link was clicked.

<ul>
    <li><a href="/#/page-b" class="bg-binding">Page B</a>
        <ul>
            <li><a href="#" class="bg-binding">A</a></li>
            <li><a href="#" class="bg-binding">B</a></li>
            <li><a href="#" class="bg-binding">C</a></li>
            <li><a href="#" class="bg-binding">D</a></li>
        </ul>
    </li>
</ul>

I just want to be able to toggle the section that was clicked on the child menu elements. Is this possible with this code provided?

I notice that Angular pushes a $$hashkey into the array of objects, is this usable?

Answer 1

If you have a scope variable like :

$scope.activeSection ='A';

You can use this value as a filter for ng-repeat and use ng-click to make the changes within your menu. Also use it in ng-class to set an active class in menu

<a ng-click="activeSection='A'" ng-class="{active: activeSection=='A'}">A</a>

<div ng-repeat="section in data.sections |filter: {'name': activeSection}">
   Name:{{section.name}}<br>
   Description: {{section.description}}
</div>

As far as the angular hashkeys go you are best off to just ignore them. Use the documented api instead