ng-mouse를 angularjs에 있는 마우스를 사용하여 항목을 전환합니다.

ng-mouse를 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의 배경을 가지고 있기 때문에, 1개의 아이템을 어떻게 동작시키는지를 알 수 없습니다.ng-repeat.

각해

다음과 같이 수정할 수 있습니다.

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

단순히 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>

저는 당신의 예를 다음과 같이 바꿀 것입니다.

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

조금 늦었지만, 이 문제는 커스텀 디렉티브로 처리할 가치가 있는 일반적인 문제라는 것을 알게 되었습니다.예를 들어 다음과 같습니다.

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

다음으로 CSS만의 예를 제시하겠습니다.예를 들어 SAS와 SLIM을 사용하고 있습니다.

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

슬림형:

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

SAS:

=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

언급URL : https://stackoverflow.com/questions/22532656/ng-mouseover-and-leave-to-toggle-item-using-mouse-in-angularjs