web-dev-qa-db-ja.com

ng-mouseoverとleaveは、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で単一のアイテムを機能させる方法がわかりません。

javascriptjqueryangularjs
64
user3398172

角度ソリューション

次のように修正できます。

$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;}
93
dfsq

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>
19
Riceman

例を次のように変更します。

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

12
Josh

ここで少し遅れましたが、これはカスタムディレクティブを処理する価値がある一般的な問題であることがわかりました。これがどのように見えるかを次に示します。

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

以下に、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
0
Darex1991