CODEWITHSUNDEEP
angularjs
user3450590
user3450590

Reputation: 341

class toggle on click element only

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

Upvotes: 0

Views: 56

Answers (4)

omer cohen
omer cohen

Reputation: 282

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

Upvotes: 0

tanmay
tanmay

Reputation: 7911

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>

Upvotes: 1

KOUSIK MANDAL
KOUSIK MANDAL

Reputation: 2052

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.

Upvotes: 2

Ankur
Ankur

Reputation: 3199

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;
}

Upvotes: 0

Related Questions