当鼠标位于<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