Mouseover funktioniert nicht richtig, wenn ich ein Tag dynamisch mit ngFor

Question

erstellen

Ich versuche, mouseover-Effekt in meinem Eingabe-Tag zuweisen.aber wenn ich versuche, die Maus auf einem beliebigen Eingabe-Tag zu halten, wirkt sich auf alle Eingabe-Tag.

<td *ngFor="let d of Xyz"> 
    <input class="inputLabel" size="3" type="text" value="XYZ" (mouseover)="hover = true" (mouseleave)="hover = false" [ngClass]="{inputCls: hover}"/> 
</td> 

Hier ist mein Code: http://jsfiddle.net/pthfV/649/ // hier wird die Feinbearbeitung in Angular 1. * Version, aber ich möchte in 2.0 Gleiche tun, aber es funktioniert nicht.

Hier habe ich Input-Tags statisch hinzugefügt, aber ich erstelle diese Tags mit * ngFor in Angular js.

Ich möchte Mouseover-Effekt in nur welche Tag ist vorbei.

Answer 1

ich das tun würde:

<div ng-app> 
    <input class="inputLabel" size="3" type="text" value="Xyz" ng-mouseover="hover0 = true" ng-mouseleave="hover0 = false" ng-Class="{inputCls: hover0}"/> 

    <input class="inputLabel" size="3" type="text" value="Xyz" ng-mouseover="hover1 = true" ng-mouseleave="hover1 = false" ng-Class="{inputCls: hover1}"/> 
</div> 

Answer 2

Zuerst wird das Verhalten auf Sie sehen erwartet. da alle Elemente die Klasse basierend auf ändern würden, wenn einer von ihnen den Hover auf true ändert, dann erhalten alle die inputCls und würden im Hover-Modus angezeigt.

Wenn wir nun wollen, dass sie sich unabhängig verhalten, müssen wir mit ng-mouseover und ng-mouselave ein für dieses Element spezifisches Attribut und mit inputCls von diesem elementspezifischen Attribut abhängig machen.

Mit etwas wie erhalten Sie die idx auf die Seriennummer für das Element festgelegt und können damit eine elementspezifische Variable erstellen, die Sie mit mouseover und mouseleave setzen und löschen können.

Answer 3

Das Mouseover-Verhalten ist hier in Ordnung. Das Problem ist, dass Ihre Lösung ein Hover Attribut in dem gesamten aktuellen Bereich festlegt. Sie müssen separate Attribute für jedes Tag haben. Versuchen: http://jsfiddle.net/pthfV/648/

<input class="inputLabel" size="3" type="text" value="Xyz" ng-mouseover="hover1 = true" ng-mouseleave="hover1 = false" ng-Class="{inputCls: hover1}"/> 

<input class="inputLabel" size="3" type="text" value="Xyz" ng-mouseover="hover2 = true" ng-mouseleave="hover2 = false" ng-Class="{inputCls: hover2}"/> 

BTW: Sie sind wahrscheinlich nicht mit AngularJS aber Angular2. Siehe hierzu ngFor documentation mit example.