AngularJSでjqueryを使用して子要素を1つだけ選択する

Question

jQueryで作業関数を使用していましたが、アプリケーションにAngularを使用することにしました。方法を見つけることができないので、CSSを1つの子要素に追加するだけです。

$('.list-div').on('mouseenter', function(){ 
    $(this).find('.client-jar').css('opacity','1'); 
    }).on('mouseleave', function() { 
    $(this).find('.client-jar').css('opacity','0'); 
    }); 

現在のHTML

<ul> 
     <li ng-repeat="one in ones | orderBy:'-date'"> 
      <div class="list-div"> 
       <div class="row jar-div first-jar-div" ng-mouseover="showButton()" ng-mouseleave="hideButton()"> 
        <div class="col-xs-7 description-div"> 
         <p class="version">{{ one.version }}</p> 
         <p class="date">{{ one.date }}</p> 
        </div> 
        <div class="col-xs-5 buttons-div"> 
         <div class="list-button client-jar"> 
          <a class="list-link" data-toggle="modal" data-target="#myModal">create server</a> 
         </div> 
         <div class="list-button server-jar"> 
          <a class="list-link">Server jar</a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </li> 
    </ul> 

そして、現在の角度JS

$scope.showButton = function(){ 
    angular.element('.list-div').find('.client-jar').css('opacity','1'); 
    }; 

    $scope.hideButton = function(){ 
    angular.element('.list-div').find('.client-jar').css('opacity','0'); 
    }; 

Answer 1

私が使用します。 https://docs.angularjs.org/api/ng/directive/ngMouseenter

<button ng-mouseenter="hoverState = true">mouse in mouse out</button> 

をその後に使用します。あなたはフラグを超えるとオフホバーを持っている。この時点で https://docs.angularjs.org/api/ng/directive/ngMouseleave

<button ng-mouseenter="hoverState = true" ng-mouseleave="hoverState = false">mouse in mouse out</button> 

。あなたは今、などなど、あなたの不透明度のものが含まれているCSSクラスを設定し、設定を解除し、NG-クラスでこのフラグをピックアップしていない、と将来のCSSアニメーションすることができます： https://docs.angularjs.org/api/ng/directive/ngClass

<button ng-mouseenter="hoverState = true" ng-mouseleave="hoverState = false" ng-class="{'opacity-class':hoverState}">mouse in mouse out</button> 

ませjQueryのに必要な、AngularJSはちょうど完全です物事についての別のやり方。

<style> 
.opacity-class .client-jar{ 
    opacity:0; 
} 
</style> 
<ul> 
     <li ng-repeat="one in ones | orderBy:'-date'"> 
      <div class="list-div"> 
       <div class="row jar-div first-jar-div" ng-mouseenter="hoverState = true" ng-mouseleave="hoverState = false" ng-class="{'opacity-class':hoverState}"> 
        <div class="col-xs-7 description-div"> 
         <p class="version">{{ one.version }}</p> 
         <p class="date">{{ one.date }}</p> 
        </div> 
        <div class="col-xs-5 buttons-div"> 
         <div class="list-button client-jar"> 
          <a class="list-link" data-toggle="modal" data-target="#myModal">create server</a> 
         </div> 
         <div class="list-button server-jar"> 
          <a class="list-link">Server jar</a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </li> 
    </ul>