How to highlight a selected row in ngRepeat

Question

I couldn t find something that will help me to solve this simple issue in Angular  All the answers are relevant for navigation bars when a comparison is being made against location path   I ve built a dynamic table using list and ngRepeat  When I click a row I m trying to assign this row a css class  selected  to highlight the fact that this row has been selected by user  and remove the  selected from previously highlighted row   I m missing the method to bind between the row that been selected and the css class assignment    I applied on each row  ul  ng-click  setSelected    But I m missing the logic inside the function to apply the changes   My Code - Plunk  My code   var webApp   angular module  webApp           controllers webApp controller   VotesCtrl   function   scope  Votes         scope votes    Votes       scope statuses     Approved   Pending   Trash   Spam          scope setSelected   function            console log  show                  services webApp factory  Votes    function            temporary repository till integration with DB this will be translated into restful get query     var votes                           id   1               created  1381583344653              updated   222212               ratingID   3               rate  5              ip   198 168 0 0               status   Pending                                    id   111               created  1381583344653              updated   222212               ratingID   4               rate  5              ip   198 168 0 1               status   Spam                                        id   2               created  1382387322693              updated   222212               ratingID   3               rate  1              ip   198 168 0 2               status   Approved                                     id   4               created  1382387322693              updated   222212               ratingID   3               rate  1              ip   198 168 0 3               status   Spam                        return votes         My HTML      lt body ng-controller  VotesCtrl  gt       lt div gt       lt ul gt           lt li class  created  gt               lt a gt CREATED lt  a gt           lt  li gt           lt li class  ip  gt               lt b gt IP ADDRESS lt  b gt           lt  li gt           lt li class  status  gt               lt b gt STATUS lt  b gt           lt  li gt       lt  ul gt       lt ul ng-repeat  vote in votes  ng-click  setSelected    gt           lt li  class  created  gt              vote created date            lt  li gt           lt li class  ip  gt                vote ip            lt  li gt           lt li class  status  gt                vote status            lt  li gt       lt  ul gt      lt  div gt      lt  body gt    My CSS  Only selected class     selected     background-color  red

User · Answer

I needed something similar  the ability to click on a set of icons to indicate a choice  or a text-based choice and have that update the model  2-way-binding  with the represented value and to also a way to indicate which was selected visually  I created an AngularJS directive for it  since it needed to be flexible enough to handle any HTML element being clicked on to indicate a choice    lt ul ng-repeat  vote in votes      gt       lt li data-choice  selected  data-value  vote id  gt     lt  li gt   lt  ul gt    Solution   http   jsfiddle net brandonmilleraz 5fr9V

User · Answer

Each row has an ID  All you have to do is to send this ID to the function setSelected    store it  in  scope idSelectedVote for instance   and then check for each row if the selected ID is the same as the current one  Here is a solution  see the documentation for ngClass  if needed     scope idSelectedVote   null   scope setSelected   function  idSelectedVote        scope idSelectedVote   idSelectedVote        lt ul ng-repeat  vote in votes  ng-click  setSelected vote id   ng-class   selected  vote id     idSelectedVote   gt           lt  ul gt    Plunker

User · Answer

You probably want to have LI rather than the UL have the background-color:

.selected li {
  background-color: red;
}

Then you want to have a dynamic class for the UL:

<ul ng-repeat="vote in votes" ng-click="setSelected()" class="{{selected}}">

Now you need to update the $scope.selected when clicking the row:

$scope.setSelected = function() {
   console.log("show", arguments, this);
   this.selected = 'selected';
}

and then un-select the previously highlighted row:

$scope.setSelected = function() {
   // console.log("show", arguments, this);
   if ($scope.lastSelected) {
     $scope.lastSelected.selected = '';
   }
   this.selected = 'selected';
   $scope.lastSelected = this;
}

Working solution:

http://plnkr.co/edit/wq6nxc?p=preview

[angularjs] How to highlight a selected row in ngRepeat?

The answer is

Examples related to angularjs

Examples related to angularjs-ng-repeat

Tags