Change color of tapped link?

ionic-v1
1

I have an ion-side-menu with an ion-list and ion-items.

Looks like this:

<ion-content>
  <ion-list>
    <!--START-->
    <ion-item nav-clear menu-close href="#/app/start">
      <span class="icon icon-menu-start"></span>
    </ion-item>
    <!--SCAN QR-CODE-->
    <ion-item nav-clear menu-close ng-controller="QrCtrl"  href="#/app/" ng-click="scanmeClicked()">
     <span class="icon icon-menu-qr"></span>
    </ion-item>
    ...

When I now click the link, the a tag gets an class “activated” for 2 seconds and then dissapears.

Is there any buildin ionic way to hightlight only the current menu item?
Or add an class to the current item (and remove it when another link is clicked) ?

2

This basic logic can get sloved with ng-class directive and a little bit of code in the controller.

3

I tried it but I just can’t get it to work. Maybe someone can give me a hint…
Using an ion-nav-bar one nav element looks like this:

<ion-side-menu side="left">
    <ion-content ng-controller="LeftMenuCtrl as menu">
        <ion-list>
            <ion-item nav-clear ng-href="#/app/dashboard" 
            ng-class="{current: menu.isItemActive('/app/dashboard')}">

and the controller:

.controller('LeftMenuCtrl', function($scope, $location) {
  $scope.isItemActive = function(item) {
    $scope.isActive = $location.path().indexOf(item.href) > -1;
    return $location.path().indexOf(item.href) > -1;
  };
})

I´m still new to angular, any help would be appreciated.

4

Got it! :smile:
So simple…

        <ion-item nav-clear menu-close ng-href="#/app/dashboard" ng-class="{'current': isActive('/app/dashboard')}">

and for the first one I added

ng-init="{'current': true}"

Controller:

app.controller('LeftMenuCtrl', function($scope, $location) {
    $scope.isActive = function (viewLocation) {
      return viewLocation === $location.path();
    };
})