Question

每个联系人都有一个面板。我想仅在用户将鼠标悬停在同一面板上时才显示特定面板上的删除按钮。

...
<div class="col-sm-3" ng-repeat="contact1 in Contacts">
                <div class="panel panel-success" ng-mouseenter="{{contact1.id}}=true" ng-mouseleave="{{contact1.id}}=false)">
                    <div class="panel-heading">
                        <a href="#" ng-show="{{contact1.id}}" ng-click="Remove($index)">REMOVE BUTTON</a>
                    </div>
...

我无法理解为什么这段代码无效。

Answer 1

您的代码中有两件事可能会产生问题。首先，ng-show / ng-mouseneter / ng-mouseleave需要一个表达式。所以你不需要放{{ }}。

但这不是唯一的问题。事实上，您使用id来管理商品的展示属性。但是这个表达式需要一个布尔值，你不能用id中的布尔值擦除你的ng-mouseneter。为此，您必须在项目isShow中使用其他属性。这样可以确保您的身份安全，并且您可以使用它来管理您的视图。

所以，它给出了这样的东西：

<div class="col-sm-3" ng-repeat="contact1 in Contacts">
    <div class="panel panel-success" ng-mouseenter="contact1.isShow = true" ng-mouseleave="contact1.isShow = false">
        <div class="panel-heading">
            <a href="#" ng-show="contact1.isShow" ng-click="Remove($index)">REMOVE BUTTON</a>
        </div>
        ....

Answer 2

从作业语句中删除括号。

括号用于呈现变量。由于您要分配，而不是ng-mouseenter="{{contact1.id}}=true"您想要ng-mouseenter="contact1.id=true"

您之前的代码相当于编写类似null=true的内容，或者已经分配给contact.id的任何值。新代码将contact.id分配给您指定的值。

编辑：您可以使用本地变量。

<div class="col-sm-3" ng-repeat="contact1 in Contacts">
  <div class="panel panel-success" ng-mouseenter="showButton=true" ng-mouseleave="showButton=false">
    <div class="panel-heading">
      <a href="#" ng-show="showButton" ng-click="Remove($index)">REMOVE BUTTON</a>
    </div>
  </div>
</div>

Answer 3

很高兴看到一个有效的例子，但是一开始你使用的角度指令需要表达式，所以请尝试从{{}}删除ng-mouseenter, ng-mouseleave and ng-show。

所以，它应该像ng-show="contact1.id"。试试这个。希望它适合你。

angular - 无法在ng-repeat中绑定元素的ng-show

3 个答案: