Angular ng-class会影响多个元素

Question

我有一个使用Python的Mako模板生成的代码：

<ul class="list-group">
        % for t in list:
        <li class="list-group-item">
            <div
                ng-class="hover ? 'btn btn-xs btn-default' : ''"
                ng-mouseenter="hover = true"
                ng-mouseleave="hover = false"> ${list.data} </div>
        </li>
        % endfor
    </ul>

我想要的只是我正在徘徊的行 - 将被转换为按钮。

问题是我看到了一个行列表，但是当鼠标悬停在其中一个元素上时 - 所有元素都会受到影响而不是我正在盘旋的特定<li>元素，就像所有行中的所有文本都被转换为按钮....任何想法我错过了什么？

Answer 1

您的悬停变量正在全局范围内分配。使用ng-repeat修复此问题，因为每个模板实例gets its own scope。

要在没有ng-repeat的情况下修复此问题，您可以在列表对象中命名悬停属性，就像在此Plunker中一样。