javascript - 菜单中的 ng-mouseover 指令 angularjs

Question

当鼠标悬停在 <li> 上时，我需要查看复选框标签。所以最初，菜单 li 只有一个标签(全部位于 ng-repeat 内)。当我跳过其中之一时，它会在复选框中发生变化。当然，当鼠标离开它时，它会回到标签。我尝试过，但它不起作用，它总是同时查看(复选框和标签)这是带有 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指令

Answer 1

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

现在该复选框仅在鼠标悬停时可见。<强> See Fiddle