如何在点击某个项目时设置背景颜色？

Question

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

在这里，我可以改变导航的背景颜色。但是当我点击一个项目时，它会改变所有4项目的背景颜色。如何解决这个问题。 Plunker

Answer 1

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

入住这Plunker

Answer 2

您需要在代码更改下面。

标记

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

代码

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

Plunkr here