Мне нужно просмотреть флажок, когда мышь находится над <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
Я создал изолированную переменную 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>
Теперь флажок будет виден только при наведении курсора мыши. См. Скрипку