CODEWITHSUNDEEP
htmlcssangularjs
Olly
Olly

Reputation: 371

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.

Upvotes: 0

Views: 1828

Answers (2)

webta.st.ic
webta.st.ic

Reputation: 5179

There you go: http://jsfiddle.net/v7hx8nho/11/enter code here

You can set a boolean, if it's clicked or not and check it in the hoverFunction... After it's true, the title is there and no hover, after you click a second time, it's false and the hover turns on... Cheers

Upvotes: 1

akhil.cs
akhil.cs

Reputation: 691

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;
    }

Upvotes: 1

Related Questions