ng-mouseover directive angularjs in menu

Question

I need to view a checkbox when the mouse is over an <li> tag. So initially, the menu li has simply a label (all inside an ng-repeat). When i pass over one of them it change in checkbox. Of course when the mouse leave it it comes back to label. I tried but it's not working and it views always both (checkbox and label) This is the code with a jsfiddle :

http://jsfiddle.net/HB7LU/20368/

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.all_titles = [
        "Title 1",
        "Title 2",
        "Title 3",
        "Title 4"
        ];

    $scope.checkBoxSelection = false;

    $scope.OnMouseOverCheckbox = function(value) {
        $scope.checkBoxSelection = value;
    }
}

<div ng-controller="MyCtrl">
    <ul>
        <li id="$index" ng-repeat="title in all_titles" ng-mouseover="OnMouseOverCheckbox(true)" ng-mouseleave="OnMouseOverCheckbox(false)">
            <input type="checkbox" data-ng-if="checkBoxSelection == true" ng-model="data.cb1" aria-label="Checkbox 1"/>
            <a data-ng-if="checkBoxSelection == false">{{title}}</a>
        </li>
    </ul>
</div>

Everything is used with AngularJs and ng-mouseover / ng-mouseleave directives

Vivek · Accepted Answer · 2015-11-27 11:31:31Z

1

I've created an isolated scope variable showCheckbox on every list item and using it to show/hide checkbox on mouseover/mouseleave respectively. I'm using ng-show instead of ng-if.

<div ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="title in all_titles" ng-init="showCheckbox=false" ng-mouseover="showCheckbox = true" ng-mouseleave="showCheckbox = false">
            <input type="checkbox" ng-show="showCheckbox" ng-model="data.cb1" aria-label="Checkbox 1" /> <a data-ng-if="checkBoxSelection == false">{{title}}</a>    
        </li>
    </ul>
</div>

Now the checkbox will be visible only on mouseover. See Fiddle

edited Nov 27, 2015 at 11:31

answered Nov 27, 2015 at 11:12

Vivek

13.6k19 gold badges101 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Atlas91 Over a year ago

it's not working. I don't think it's the problem.. also, there could be a problem that could change all <li> on over and not only the one i'm over in that moment.. Understand?

Atlas91 Over a year ago

wait, i don't want check the checkbox but only show it. this is the correct fiddle: jsfiddle.net/HB7LU/20369 leave the ng-model now. Don't care about it. And if your try your way it select All checkbox and not the one you're over in that moment.

Vivek Over a year ago

@End.Game What do you mean by show it? It is already visible

Atlas91 Over a year ago

Infact! This is the problem! it should appears if checkBoxSelection == true. So when i'm over with mouse. But now it appears always even if checkBoxSelection == false.

Atlas91 Over a year ago

i don't know why but it's not working yes..maybe it's something else. Thank you by the way

|

Collectives™ on Stack Overflow

ng-mouseover directive angularjs in menu

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related