CODEWITHSUNDEEP
javascriptjqueryangularjs
J. Davidson
J. Davidson

Reputation: 3317

Angularjs selectable highlighted rows

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

Upvotes: 1

Views: 2769

Answers (1)

dimirc
dimirc

Reputation: 6615

  • 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

Upvotes: 5

Related Questions