Ng-mouseover и оставить для переключения элемента с помощью мыши в 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.

Ответ 1

Угловое решение

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

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

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

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

Также вам нужно поставить ngRepeat на 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>

демонстрация

CSS решение

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

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

Ответ 2

Я бы просто сделал назначение в 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>

Ответ 3

Я бы, наверное, изменил ваш пример так:

<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.

Ответ 4

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

  .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>

Ответ 5

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

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

Слим:

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

Ответ 6

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

{{}} Task.name редактировать