CODEWITHSUNDEEP
cssangularjs
vimuth
vimuth

Reputation: 5612

Change styles of an item with ng-click event

I need to change the background color of an li tag when I click it.

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

   }

And I only need to change background color witch I click. It would be great if anyone can look into it.

Upvotes: 1

Views: 5633

Answers (1)

Seth Flowers
Seth Flowers

Reputation: 9190

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

note

I changed your first anchor to changeCategory(1) rather than changeCategory(2), presuming that was your intention. Also, this is crying out for an ng-repeat to satisfy the DRY principle.

Upvotes: 5

Related Questions