Question

我正在尝试在输入标签中指定鼠标悬停效果。但是当我尝试将鼠标悬停在任何输入标签上时，它会影响所有输入标签。

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

这是我的代码：http://jsfiddle.net/pthfV/649/ //这里的Angular 1. *版本工作正常，但我想在2.0中做同样的事情，但它不起作用。

这里我静态添加了输入标签，但是我在Angular js中使用* ngFor创建了这个标签。

我想只在哪个标签结束时进行鼠标悬停效果。

Answer 1

我会这样做：

<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

首先，您所看到的行为是预期的。因为所有元素都会根据hover更改类，如果它们中的任何一个将悬停更改为true，那么all将获得inputCls并将以悬停模式显示。

现在，如果我们希望它们独立运行，我们需要让ng-mouseover和ng-mouseleave设置一个特定于该元素的属性，并且inputCls依赖于该元素特定的属性。

通过使用类似<input *ng-for="#el of list; #idx = index"的内容，您将idx设置为元素的序列号，并可以使用它来创建一个特定于元素的变量，鼠标悬停和鼠标距离可以设置和清除。

Answer 3

鼠标悬停行为在这里没问题。问题是您的解决方案在整个当前范围内设置悬停属性。您需要为每个标记分别具有单独的属性。尝试：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}"/>

顺便说一句：你可能没有使用AngularJS而是使用Angular2。使用ngFor documentation查看此example。

当我使用ngFor动态创建标记时，mouseover无法正常工作

3 个答案: