AngularJS: show hide elements based on mouse events

Question

Here is an example - http://plnkr.co/edit/iwvjJcUurUW2AvkDArfz?p=preview

I would like the delete button to show up only when mouse hovers on the row and perform some function delete(name), by passing the name

How can I achieve this?

P.S I am new to Angular world

Answer 1

This can be quickly solved with CSS, no need to bring JS or Angular. Just using basic CSS would be in my opinion better solution. Add the following to your stylesheet:

 <style>
   tr i.icon-minus-sign { display: none; }
   tr:hover i.icon-minus-sign { display: block; };
 </style>