Ng-Mouseup-4

 

There are elements of array.The element on which mouseup event is fire the style which is bind to ng-mouseup directive will apply that is empty style means element comes in their original color.

 
 
 
<!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> <style> .nav { padding: 10px; cursor: pointer; background-color: lightgray; border-bottom: 5px solid black; } </style> </head> <body ng-app="app"> <div ng-controller="controllerName"> <span class="nav" ng-repeat="p in nav" ng-style="style" ng-mouseup="style={}" ng-mousedown="style={'border-bottom': '5px solid red','background-color':'pink','cursor':'pointer'}">{{p}}</span> </div> <script> var app = angular.module("app", []); app.controller('controllerName', ['$scope', function ($scope) { $scope.nav=["Home","About","Contact"]; }]); </script> </body> </html>
Output