Ng-Mouseleave-6

 

Example of Ng-Mouseleave and Ng-MouseEnter See the code:

 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body ng-app="app"> <div ng-controller="myController"> <div class="container"> <div class="row well"> <h2>Mouse enter and leave in the table row</h2> <table class="table"> <tbody> <tr ng-repeat="d in [1,2,3,4,5,6,7]" ng-mouseleave="style={}" ng-mouseenter="style={'background-color':'#5CB85C','color':'white'}" ng-style="style"> <td>{{data}}</td> </tr> </tbody> </table> </div> </div> </div> <script> var app = angular.module("app", []); app.controller('myController', ['$scope', function ($scope) { $scope.data = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's, a galley of type and scrambled it to make a type specimen book."; }]); </script> </body> </html>
Output