使用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原则。