ng菜单中的鼠标悬停指令angularjs

ng-mouseover directive angularjs in menu

本文关键字：悬停 指令 angularjs 鼠标 菜单 ng      更新时间：2023-09-26

当鼠标位于<li>标记上时，我需要查看一个复选框。因此，最初，菜单li只有一个标签（全部在一个ng重复中）。当我越过其中一个时，它会在复选框中更改。当然，当鼠标离开它时，它会回到标签上。我试过了，但它不起作用，它总是同时查看（复选框和标签）这是带有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>

所有内容都与AngularJs和ng-mouseover/ng-mouseleave指令一起使用

我在每个列表项上创建了一个独立的作用域变量showCheckbox，并使用它分别显示/隐藏mouseover/mouseleve上的复选框。我用的是ng-show而不是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>

现在，复选框将仅在鼠标悬停时可见。请参阅Fiddle

相关文章：