使用ng-click事件更改項目的樣式

Question

我需要在單擊時更改li標籤的背景顏色。

<ul> 
     <li> 
      <a ng-click="changeCategory(2)">Category 1</a> 
     </li> 
     <li> 
      <a ng-click="changeCategory(2)">Category 2</a> 
     </li> 
     <li> 
      <a ng-click="changeCategory(3)">Category 3</a> 
     </li> 
     <li> 
      <a ng-click="changeCategory(4)">Category 4</a> 
     </li> 
    <ul> 

    $scope.changeCategory = function(id){ 

    } 

，我只需要改變背景色巫婆我點擊。如果有人可以研究它，那將是非常棒的。

Answer 1

CSS

.selected { 
    background-color: #eee; 
} 

HTML

<ul> 
    <li ng-class="{'selected': category === 1}"> 
     <a ng-click="changeCategory(1)">Category 1</a> 
    </li> 
    <li ng-class="{'selected': category === 2}"> 
     <a ng-click="changeCategory(2)">Category 2</a> 
    </li> 
    <li ng-class="{'selected': category === 3}"> 
     <a ng-click="changeCategory(3)">Category 3</a> 
    </li> 
    <li ng-class="{'selected': category === 4}"> 
     <a ng-click="changeCategory(4)">Category 4</a> 
    </li> 
<ul> 

的JavaScript

$scope.changeCategory = function(id){ 
    // other stuff 
    $scope.category = id; 
} 

記

我將您的第一個錨點更改爲changeCategory(1)而不是changeCategory(2)，假設這是您的意圖。此外，這是呼籲ng-repeat以滿足DRY原則。