CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
Naveen
Naveen

Reputation: 777

How to set background colour when click on an item?

HTML 

 <ul class="ul_nav">
    <li ng-class="class" ng-click="changeClass()">Marketing</li>
    <li ng-class="class" ng-click="changeClass()">Sells Team Nestle</li>
    <li ng-class="class" ng-click="changeClass()">Marketing Test</li>
    <li ng-class="class" ng-click="changeClass()">Marketing </li>                   
</ul>

Angularjs

$scope.changeClass = function(){
        if ($scope.class === "nav_color")
            $scope.class = "nav_active";
         else
            $scope.class = "nav_color";
    };

CSS

.ul_nav{
    margin-top:15px;
    list-style:none;
    padding:0;
    height:600px;
}
.ul_nav > li{
    padding: 3px 0 3px 25px;
    cursor:pointer;
}

.ul_nav > li:hover{
    background:#ff9900;
    color:#fff;
}
.nav_color{
    background:#fff;
    color:#000;
}
.nav_active{
    background:#ff9900;
    color:#fff;
}

Here I can change background colour of navigation. But when I click on one item it will change all 4 item's background color. How to fix this issue. Plunker

Upvotes: 1

Views: 2839

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

You need to make below changes in code.

Markup

<ul class="ul_nav">
  <li ng-class="class1" ng-click="changeClass('class1')">Marketing</li>
  <li ng-class="class2" ng-click="changeClass('class2')">Sells Team Nestle</li>
  <li ng-class="class3" ng-click="changeClass('class3')">Marketing Test</li>
  <li ng-class="class4" ng-click="changeClass('class4')">Marketing </li>
</ul>

Code

$scope.changeClass = function(className) {
    className = (className === "nav_color") ? "nav_active" : "nav_color";
};

Plunkr here

Upvotes: 0

Ajay Narain Mathur
Ajay Narain Mathur

Reputation: 5466

HTML:

<ul class="ul_nav">
    <li ng-class="{class : classVar==='Marketing" }' ng-click="changeClass('Marketing')">Marketing</li>
    <li ng-class="{class : classVar==='Sells' }" ng-click="changeClass('Sells')">Sells Team Nestle</li>
    <li ng-class="{class : classVar==='MarketingTest' }" ng-click="changeClass('MarketingTest')">Marketing Test</li>
    <li ng-class="{class : classVar==='Marketing1' }" ng-click="changeClass('Marketing1')">Marketing </li>                   
</ul>

JS:

$scope.changeClass = function(value){
        $scope.classVar= value; 
    };
    $scope.myVar = false;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };

Check this Plunker

Upvotes: 3

Related Questions