Question

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中使单项工作。

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

Demo

CSS解决方案

但是，如果可能尝试仅使用CSS执行此类操作，这将是最佳解决方案，并且不需要JS：

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

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

Answer 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;
};

我知道这是一个微妙的差异，但会使域名对UI操作的约束更少。在心理上，它可以更容易地考虑一个可编辑的项目，而不是被挖掉。

示例jsFiddle。

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

Answer 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

ng-mouseover并使用angularjs中的鼠标离开切换项目

5 个答案:

角度解决方案

CSS解决方案