ng-наведите указатель мыши и оставьте для переключения элемента с помощью мыши в angularjs

HTML:

<ul ng-repeat="task in tasks">
    <li ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">{{task.name}}</li>
    <span ng-show="hoverEdit"><a>Edit</a></span>
</ul>

JS:

$scope.hoverIn = function(){
    $scope.hoverEdit = true;
};

$scope.hoverOut = function(){
    $scope.hoverEdit = false;
};

код смешон, потому что я думаю, что это слишком много. Я думаю, что это можно упростить. В любом случае результат переключает весь элемент, как только он завис. У меня есть фон jQuery, поэтому я понятия не имею, как заставить один элемент работать в ng-repeat.

6 62
javascript angularjs jquery

6 ответов:

угловое разрешение

вы можете исправить это так:

$scope.hoverIn = function(){
    this.hoverEdit = true;
};

$scope.hoverOut = function(){
    this.hoverEdit = false;
};

внутри контекста функций ngMouseover (и аналогичных) находится текущая область элемента, поэтому это относится к текущей дочерней области.

Также вам нужно поставить ngRepeat on li:

<ul>
    <li ng-repeat="task in tasks" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
        {{task.name}}
        <span ng-show="hoverEdit">
            <a>Edit</a>
        </span>
    </li>
</ul>

демо: http://plnkr.co/edit/eGohFqiGKmkonmLwT3g1?p=preview

CSS решение

однако, когда это возможно, попробуйте сделать такие вещи с помощью Только CSS, это было бы оптимальным решением, и не требуется JS:

ul li span {display: none;}
ul li:hover span {display: inline;}
89

Я бы просто сделал назначение в NG-mouseover и ng-mouseleave; не нужно беспокоиться о js-файле :)

<ul ng-repeat="task in tasks">
    <li ng-mouseover="hoverEdit = true" ng-mouseleave="hoverEdit = false">{{task.name}}</li>
    <span ng-show="hoverEdit"><a>Edit</a></span>
</ul>
18

Я бы, наверное, изменил ваш пример, чтобы выглядеть так:

<ul ng-repeat="task in tasks">
  <li ng-mouseover="enableEdit(task)" ng-mouseleave="disableEdit(task)">{{task.name}}</li>
  <span ng-show="task.editable"><a>Edit</a></span>
</ul>

//js
$scope.enableEdit = function(item){
  item.editable = true;
};

$scope.disableEdit = function(item){
  item.editable = false;
};

Я знаю, что это тонкое различие, но делает домен немного менее привязанным к действиям пользовательского интерфейса. Мысленно это позволяет легче думать о том, что элемент редактируется, а не был задуман.

пример jsFiddle:http://jsfiddle.net/jwcarroll/u8fHc/

12

немного поздно здесь, но я обнаружил, что это общая проблема, стоящая пользовательской директивы для обработки. Вот как это может выглядеть:

  .directive('toggleOnHover', function(){
    return {
      restrict: 'A',
      link: link
    };

    function link(scope, elem, attrs){
      elem.on('mouseenter', applyToggleExp);
      elem.on('mouseleave', applyToggleExp);

      function applyToggleExp(){
        scope.$apply(attrs.toggleOnHover);
      }
    }

  });

Вы можете использовать его как это:

<li toggle-on-hover="editableProp = !editableProp">edit</li>
6

вот пример с только CSS для этого. В примере я использую SASS и SLIM.

https://codepen.io/Darex1991/pen/zBxPxe

Slim:

a.btn.btn--joined-state
  span joined
  span leave

SASS:

=animate($property...)
  @each $vendor in ('-webkit-', '')
    #{$vendor}transition-property: $property
    #{$vendor}transition-duration: .3s
    #{$vendor}transition-timing-function: ease-in

=visible
  +animate(opacity, max-height, visibility)
  max-height: 150px
  opacity: 1
  visibility: visible

=invisible
  +animate(opacity, max-height, visibility)
  max-height: 0
  opacity: 0
  visibility: hidden

=transform($var)
  @each $vendor in ('-webkit-', '-ms-', '')
    #{$vendor}transform: $var

.btn
  border: 1px solid blue

  &--joined-state
    position: relative
    span
      +animate(opacity)

    span:last-of-type
      +invisible
      +transform(translateX(-50%))
      position: absolute
      left: 50%

    &:hover
      span:first-of-type
        +invisible
      span:last-of-type
        +visible
        border-color: blue
0

даже вы можете сделать это без каких-либо методов

    {{задача.название}} Редактировать
-1