class toggle on click element only

Question

I want active class only on the a tag that i click on, rest should show 'inactive class':

app.controller("myCtrl", function($scope, $log){
       $scope.activeact=false;
       $scope.makeactive=function(){

       $scope.activeact=true;
    }
});


<ul>
    <li><a href="#" ng-click="makeactive()" ng-class="activeact ? 'active' : 'inactive'">one</a></li>
    <li><a href="#" ng-click="makeactive()" ng-class="activeact ? 'active' : 'inactive'">Two</a></li>
    <li><a href="#" ng-click="makeactive()" ng-class="activeact ? 'active' : 'inactive'">Three</a></li>
</ul>

pls help

yes, they are fixed, you can give example to ng-repeat later, after answer for fixed li's — user3450590
– user3450590, Commented Mar 22, 2017 at 13:35

KOUSIK MANDAL · Accepted Answer · 2017-03-22 13:38:22Z

2

Considering the number of list elements are fixed and small for a easy solution;

app.controller("myCtrl", function($scope, $log){

       $scope.makeactive=function(num){
            $scope['li'+num]=true;
       }
});

And the HTML is:

<ul>
   <li><a href="#" ng-click="makeactive(1)" ng-class="li1 ? 'active' : 'inactive'">one</a></li>
   <li><a href="#" ng-click="makeactive(2)" ng-class="li2 ? 'active' : 'inactive'">Two</a></li>
   <li><a href="#" ng-click="makeactive(3)" ng-class="li3 ? 'active' : 'inactive'">Three</a></li>
</ul>

Obviously it is not a generalised solution, but for small elements this is an easier one.

answered Mar 22, 2017 at 13:38

KOUSIK MANDAL

2,0421 gold badge24 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tanmay · Accepted Answer · 2017-03-22 13:41:16Z

Here's what you can do! Make use of ng-repeat using following array:

$scope.numbers = ["one", "two", "three"];

Now, your ng-repeat on <li> would look like this:

<li ng-repeat="num in numbers">
  <a href="#" ng-click="makeactive($index)" 
     ng-class="activeact{{$index}} ? 'active' : 'inactive'"
     ng-bind="num">
  </a>
</li>

Now, on click of your links, active/inactive will toggle.

Here's the working code snippet!

angular.module("myApp", [])
  .controller("myCtrl", function($scope, $log) {
    $scope.activeact = false;
    $scope.numbers = ["one","two","three"]
    $scope.makeactive = function(index) {
      $scope["activeact"+index] = !Boolean($scope["activeact"+index]);
    }
  });

.active {
  color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="num in numbers"><a href="#" ng-click="makeactive($index)" ng-class="activeact{{$index}} ? 'active' : 'inactive'">{{num}}</a></li>
  </ul>
</body>

Ankur · Accepted Answer · 2017-03-22 13:34:20Z

0

Use can use different code like this

<ul>
<li><a href="#" ng-click="makeactive(1)" ng-class="selectedindex==1 ? 'active' : 'inactive'">one</a></li>
<li><a href="#" ng-click="makeactive(2)" ng-class="selectedindex==2 ? 'active' : 'inactive'">Two</a></li>
<li><a href="#" ng-click="makeactive(3)" ng-class="selectedindex==3 ? 'active' : 'inactive'">Three</a></li>
</ul>

In controller

$scope.makeactive=function(index){    
  $scope.selectedindex=index;
}

answered Mar 22, 2017 at 13:34

Ankur

3,2095 gold badges30 silver badges57 bronze badges

Comments

omer cohen · Accepted Answer · 2017-03-22 14:00:26Z

0

you can use ui-router :

<ul class="nav nav-pills nav-justified">
    <li ui-sref-active="active"><a ui-sref="home">home</a></li>
    <li ui-sref-active="active"><a ui-sref="about">about</a</li>
    <li ui-sref-active="active"><a ui-sref="contact">contact</a></li>
</ul>

for tutorials here : github and Scotch

examples of ui router : exaple 1 and codepen

you can do with ui-router the same without ng-class or ng-repeat

answered Mar 22, 2017 at 14:00

omer cohen

2821 gold badge5 silver badges19 bronze badges

Collectives™ on Stack Overflow

class toggle on click element only

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related