Olly Olly - 5 months ago 86
AngularJS Question

Disable ng-mouseover on click

I have a table list of 10 elements floated left, and when you hover over any of the rows, it displays that object in more detail in the div on the right hand side of the page.

I would like to have it so you can also click on one of those rows, it focuses on that row, showing it on the right hand side and disabling the hovers on other rows until you click off/do something etc.

I've had a look at ng-mouseover on disabled button in Angularjs, but that answer uses css - not sure how to incorporate that into my code (Completely restructuring it is an option! :( )

HTML

</div>
<div class="row" ng-show="resultsExist">
<div class="col-lg-6 col-md-6">
<table class="table">
<tr ng-repeat="doc in docs" ng-init="index = $index + 1" ng-mouseenter="hoverFocus(doc)" ng-click="clickFocus(doc)">
<td>{{index}}</td>
<td>{{doc.headline.main}}</td>
</tr>
</table>
</div>
<div class="col-lg-6 col-md-6">
<div ng-show="showInfo">
<p>Publication Date: {{infoDoc.pub_date}}</p>
<h2>{{infoDoc.headline.main}}</h1>
<h3>{{infoDoc.lead_paragraph}}</h3>
<p> Source: {{infoDoc.source}}</p>
<button target="_blank" href="{{infoDoc.webUrl}}"> See full link here</button>
</div>
</div>
</div>


JS

$scope.hoverFocus = function(doc) {
$scope.showInfo = true;
$scope.infoDoc = doc;
}
$scope.clickFocus = function() {
// Not sure
}


Any help would be appreciated, not sure how to continue with this!

EDIT: Took me a while but here's a fiddle showing a more basic overview. http://jsfiddle.net/v7hx8nho/3/ On hover show title of that item, on click show that item and no more hover until you click off.

Answer

Few suggestions,

  1. You can use CSS to disable the mouse events on the other elements, https://developer.mozilla.org/en/docs/Web/CSS/pointer-events so at the time when you want to disable the hover add this style, by using ng-class or something.

  2. On your ng-mousever event handling function, create a if condition and check whether to show the information or not, eg,

    $scope.hoverFocus = function(doc) {
      if ($scope.on == false) return;

      $scope.showInfo = true;
      $scope.infoDoc = doc;
    }

Comments