ng-mouseover를 누르고 angularjs에서 마우스를 사용하여 항목을 토글합니다.

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 배경이 있으므로 .NET에서 단일 항목을 작동시키는 방법을 모릅니다 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 만있는 예가 있습니다. 예를 들어 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

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