/angularjs/

AngularJS - Example App - Part 4

2014-07-01 20:47:35

In this episode we will highlight a current menu item.

1. Add new controller for menu

//..
.controller('MenuCtrl', function ($scope, $location) {
    $scope.getClass = function(path) {
        if ($location.path().substr(0, path.length) == path) {
            return "active"
        } else {
            return ""
        }
    }
})
//..

2. We have to change html for menu


<div id='"sidebar"'>
<ul class='"sidebar-menu"' ng-controller='"MenuCtrl"'>
<li><a href='"#"' ng-class="&quot;getClass('/dashboard')&quot;"><span class='"glyphicon' glyphicon-calendar&quot;=""></span>  Dashboard</a></li>
<li><a href='"#/post"' ng-class="&quot;getClass('/post')&quot;"><span class='"glyphicon' glyphicon-book&quot;=""></span>  Post</a></li>
<li><a href='"#/unsaved"' ng-class="&quot;getClass('/unsaved')&quot;"><span class='"glyphicon' glyphicon-bell&quot;=""></span>  Unsaved</a></li>
<li><a href='"#/splitter"' ng-class="&quot;getClass('/splitter')&quot;"><span class='"glyphicon' glyphicon-th-list&quot;=""></span>  Splitter</a></li>
</ul>
</div>

GitHub and example