Angularjs selectable highlighted rows

Question

Hi I have following table in ng-repeat

<div ng-repeat ="item in items">
   <span>{{item.name}}></span>
   <span>{{item.age}}></span>
</div>

what I want to do is Each row with mouse over is highlighted and clickable to passing the item to further process.

Please let me know how i can achieve this

dimirc · Accepted Answer · 2014-07-01 14:30:33Z

5

To highlight on mouseover you could use the :hover CSS Selector
To pass item to further process, you could use ngclick

CSS

.hoverme:hover
{
background-color:yellow;
}
.clicked
{
background-color:green;
}

JS

<div class="hoverme" ng-repeat ="item in items" ng-click="doSomething(item)" ng-class="{clicked:rowClicked==item}">
   <span>{{item.name}}></span>
   <span>{{item.age}}></span>
</div>

Update

Example plunker

edited Jul 1, 2014 at 14:30

answered Jul 1, 2014 at 2:54

dimirc

6,7853 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

J. Davidson Over a year ago

This works fine except that once I click the row color doesnt stay yellow. Please let me know how the background color stays same untill another row is clicked. Thanks

Ian Steffy Over a year ago

not sure why select.js needs to exist for this plunker example, but this is hands down the best solution for highlighting table rows. I've seen answers with 114 ups that were nothing compared to this. Thank you.

Collectives™ on Stack Overflow

Angularjs selectable highlighted rows

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related