angularjsのマウスオーバー時に現在の要素をターゲットにする方法は？

サムネイルにカスタムアイコンを表示したい。だから私の例では、 "アップロード - サム"は私の親指であり、私のカスタムアイコンはスパンです。angularjsのマウスオーバー時に現在の要素をターゲットにする方法は？

問題は、これらのうちのいくつかが動的に生成されているので、現在ホバリングされたサムネイルをどのようにターゲットにするかわかりません。すべてのスパンアイコンが表示されたら、私が今持っているものが表示されます。

<div class="upload-thumb" ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)"><span class="delete-media" ng-show="hoverEdit"><i class="mdi mdi-delete"></i></span></div> 

    $scope.hoverIn = function(event){ 
    // this.hoverEdit = true; 
    }; 

$scope.hoverOut = function(event){ 
    // this.hoverEdit = false; 
    };

しばらくの間、なぜ、binがこれに苦しんでいるのですか。ありがとう。

出典

2017-04-10 funguy

はい、ただし、コードはevent.targetのように見えるはずです。 – funguy

これはCSSを使用して実現できます。すなわち、.upload-thumb span.delete-media：hover {color：red} ' – Satpal

これはこれより複雑です。スパンはデフォルトでは表示されません。どのようにthis.hoverEdit = trueを割り当てる必要があるか、現在のホバリングアイテムにのみ適用されます。 – funguy

angular.module('app', []); 
 

 
angular.module('app') 
 
.controller('ExampleController', ['$scope', function($scope) { 
 

 
\t $scope.hoverIn = function(event){ 
 
\t  // this.hoverEdit = true; 
 
\t  var el = getElement(event); 
 
\t  // Do something with element, for example add a class 
 
\t  el.addClass('myClass'); 
 
\t  console.log('hoverIn ' + el); 
 
\t }; 
 

 
\t $scope.hoverOut = function(event){ 
 
\t  // this.hoverEdit = false; 
 
\t  var el = getElement(event); 
 
\t  // Do something with element, for example remove a class 
 
\t  el.removeClass('myClass'); 
 
\t  console.log('hoverOut ' + el); 
 
\t }; 
 

 
\t function getElement(event) { 
 
\t \t return angular.element(event.srcElement || event.target); 
 
\t } 
 

 
}]);

<!doctype html> 
 

 
<html lang="en" ng-app="app"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
    <style> 
 
    .myClass { color: blue; } 
 
    </style> 
 
</head> 
 
    
 
<body ng-controller="ExampleController"> 
 
\t <div ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb1</div> 
 
\t <div ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb2</div> 
 
</body> 
 
</html>

編集：10はここにあなたの要素を取得し、それをあなたがやりたいためのサンプルスニペットです。ここは、前の兄弟（投稿者からの追加要求）を操作し、別のサンプルです

angular.module('app', []); 
 

 
angular.module('app') 
 
.controller('ExampleController', ['$scope', function($scope) { 
 

 
\t $scope.hoverIn = function(event){ 
 
\t  var el = getElement(event); 
 
\t  var previousElement = el.previousElementSibling; 
 
\t  if(previousElement) { 
 
\t  \t angular.element(previousElement).addClass('myClass'); 
 
\t  } 
 
\t }; 
 

 
\t $scope.hoverOut = function(event){ 
 
\t  var el = getElement(event); 
 
\t  var previousElement = el.previousElementSibling; 
 
\t  if(previousElement) { 
 
\t  \t angular.element(previousElement).removeClass('myClass'); 
 
\t  } 
 
\t }; 
 

 
\t function getElement(event) { 
 
\t \t return event.srcElement || event.target; 
 
\t } 
 

 
}]);

<!doctype html> 
 

 
<html lang="en" ng-app="app"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
    <style> 
 
    li { margin: 12px; } 
 
    .myClass { color: blue; } 
 
    </style> 
 
</head> 
 
    
 
<body ng-controller="ExampleController"> 
 

 
<ul> 
 
\t <li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb1</li> 
 
\t <li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb2</li> 
 
\t <li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb3</li> 
 
\t <li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb4</li> 
 
\t <li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb5</li> 
 
</ul> 
 

 
</body> 
 
</html>

出典

2017-04-10 11:19:10

これは実際には動作するかもしれませんが、データを動的に生成する方法はまだ分かりません。= thumbid私はこのように動的にこのhtmlを生成しています。var newelement = $ compile（ '

'）（$ scope）; – funguy

私はこの情報を持っていませんでした^^私はスニペットを変更して、要素を取得して何でもしたいと思うようにします; –

最後の1ビットです。前の兄弟にクラスを適用する必要があります。私が得ることができれば、この例はうまくいくでしょう。 – funguy

あなたが探しているものはわかりません。しかし、あなたは、あなたは、関連する子ノード

$scope.hoverIn = function(event){ 
     event.childNodes["1"].hidden = true 
     }; 

     $scope.hoverOut = function(event){ 
      event.childNodes["1"].hidden = false 
     }; 
Demo

angular.module("app",[]) 
 
.controller("ctrl",function($scope){ 
 
    
 
    $scope.hoverIn = function(event){ 
 
    event.childNodes["1"].hidden = true 
 
    }; 
 

 
    $scope.hoverOut = function(event){ 
 
     event.childNodes["1"].hidden = false 
 
    }; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    <div class="upload-thumb" ng-mouseover="hoverIn($event.target)" ng-mouseleave="hoverOut($event.target)">text <span class="delete-media" >delete-icon</span></div> 
 

 
    
 
</div>

を表示/非表示にすることができますだけではなく、イベントのHTMLパス $event.targetで even.childNodes

<div class="upload-thumb" ng-mouseover="hoverIn($event.target)" ng-mouseleave="hoverOut($event.target)">text <span class="delete-media" >delete-icon</span></div>

を使用して子コンテンツを非表示にすることができます

出典

2017-04-10 11:16:02

hoverIn関数では、thisの代わりにevent.currentTargetを使用してみてください。問題を解決するかもしれない。

出典

2017-04-10 11:36:32

angularjsのマウスオーバー時に現在の要素をターゲットにする方法は？

答えて

関連する問題