0

enter image description here

I currently have a json file that has page title and content data.

Like so :

[
  {
  "title":"About",
  "content":"About me . . . . . . "
  },
  {
  "title":"Contact",
  "content":"Reach me . . . ." 
  },
  {
  "title":"Create a Post",
  "content": "What's on your mind?"
  }
]

The json data is attached to an angular controller. .controller('PageController', ['$scope', '$http', '$routeParams',function($scope,$http,$routeParams){ $http.get('../../../data/pages.json').success(function(data){ $scope.page = data[$routeParams.id]; }); }])

This information is attached to the dom view with angular js and ng-repeat. I am looping ng-repeat="page in pages" and so far I see the About, Contact, and Create Post page successfully. I can even click on the li tag and successfully transfer to the correct page.

However my problem is that the li tag never registers with an active class.

Here is my code snippet.

<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
  <li ng-class="{'active': 1}" ng-repeat="page in pages"><a href="#/page/{{pages.indexOf(page)}}">{{page.title}}</a></li>
</ul>

How can I set the li tag to active with this set up?

Felice
  • 571
  • 1
  • 7
  • 22
  • duplicate question see http://stackoverflow.com/questions/12295983/set-active-tab-style-with-angularjs – Fracedo Oct 07 '15 at 18:44

1 Answers1

0

Seems to me that you're using page.title and page.content somewhere in the view to actually show the title and content of the page.

Having those two available means that you could set do something like <li ng-class="{'active': page.title === currentPage.title}" ng-repeat="currentPage in pages"><a href="#/page/{{pages.indexOf(currentPage)}}">{{currentPage.title}}</a></li>

If you post the entire view and controller this would be easier to diagnose though

Vulturous
  • 141
  • 2
  • 1
    Thank you and sorry for the late reply. You are right I am missing some content & I do have a page.content and page.title. However I seemed to figure out what the problem was. Because I am using bootstrap-material-design I was able to fix highlighting of the active links with this script in the dom page ``` ``` Thank for your help. – Felice Oct 20 '15 at 17:42