AngularJs removing classes using ng-click

Question

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());
    };
  }
]);

I think this previous question may help you http://stackoverflow.com/questions/20460369/adding-and-removing-classes-in-angularjs-using-ng-click — Leticia, Jun 17 '16 at 13:55
thanks leticia, your answer help me a bit, but now the class is applied if i click 2 times :(, I used this: ng-click="satisfaction = 'VeryHappy'" ng-class="{active:satisfaction == 'VeryHappy'}" — raduken, Jun 17 '16 at 15:09

score 1 · Accepted Answer · answered Jun 17 '16 at 15:24

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.

AngularJs removing classes using ng-click

1 Answers1