I have a list of links that I want to be able to highlight when clicked without redirecting to the page. Below is the code snippet:
HTML
<ul class="nav nav-list">
<li ng-repeat="navLink in navLinks" ng-class="navClass('{{navLink.Title}}')">
<a href='#/{{navLink.Title}}'>{{navLink.LinkText}}</a>
</li>
</ul>
Javascript:
app.controller('CreatorController', function($scope,$rootScope,$location,$http,CreatorService,FlashService) {
$scope.navLinks = [{
Title: 'home',
LinkText: 'Home',
}, {
Title: 'about',
LinkText: 'About Us'
}, {
Title: 'contact',
LinkText: 'Contact Us'
}];
$scope.navClass = function (page) {
var currentRoute = $location.path().substring(1) || 'home';
return page === currentRoute ? 'active' : '';
};
});
The current code highlights the link when clicked but also redirects to that particular page. How can I modify the code so that it only highlights the selected link without redirecting to the page upon clicking?
`