Raduken Raduken - 5 months ago 29
AngularJS Question

AngularJs removing classes using ng-click

I have links who get and remove a class when the path match, works perfect, the only problem now is: one of these links has no path so how can I remove the class from the link1 above after click on link2 ? I could insert the class on link2 "who has no path", so right now I wanna remove the class of link1 after click in link 2. any ideas guys?

Thank you.

html

<div class="sidebar-nav">
<ul>
<li ng-class="{'current':getLocation('/url/test')}">
<a href="#/url/test">link 1
<i class="pull-right fa fa-calendar-plus-o" aria-hidden="true"></i>
</a>
</li>
<li ng-click="current=!current" ng-class="{'current': current}" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<a>link 2
<i class="pull-right fa fa-circle" aria-hidden="true"></i></span></a>
<div class="collapse collapse-styled" id="collapseExample">
<a href="#">sublink 1
<i class="pull-right fa fa-calendar" aria-hidden="true"></i>
</a>
<a href="#">sublink 2
<i class="pull-right fa fa-list" aria-hidden="true"></i>
</a>
</div>
</li>
</ul>
</div>


angular:

angular.module('components').controller('sidebarController', [
'$location',
'$scope',
'jquery',

function($location, $scope, $) {
'use strict';

$scope.getLocation = function(path) {
var Search = new RegExp('^' + path, '');
return !!Search.exec($location.path());
};
}
]);

Answer

As Leticia's commented link, do something similar. Instead of binding to a function, bind the link 1 current class condition to a variable.

Template:

<div class="sidebar-nav">
  <ul>
    <li ng-click="getLocation('/url/test')" ng-class="{'current': activeLinks[1]}">
      <a href="#/url/test">link 1
          <i class="pull-right fa fa-calendar-plus-o" aria-hidden="true"></i>
      </a>
    </li>
    <li ng-click="linkClicked(2)" ng-class="{'current': activeLinks[2]}" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
      <a>link 2
        <i class="pull-right fa fa-circle" aria-hidden="true"></i>
      </a>
    </li>
  </ul>
</div>

In controller:

$scope.activeLinks = [];

$scope.linkClicked = function(link) {
    $scope.activeLinks.length = 0;
    $scope.activeLinks[link] = true;
}

$scope.getLocation = function(path) {
    var Search = new RegExp('^' + path, '');

    // test: suppose $location.path is /url/test
    var locationPath = '/url/test';
    if(!!Search.exec(locationPath)) {
      $scope.activeLinks.length = 0;
      $scope.activeLinks[1] = true
    };
};

Here, activeLinks array is used to set the current class to the links. If activeLinks[1] is true, current class condition gets true for link 1. If activeLinks[2] is true, current class condition gets true for link 2. At a time, only one link will have current class making others false.

See this DEMO.

Comments