angular - 未能在 ng-repeat 中绑定元素的 ng-show

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

很高兴看到一个有效的示例，但首先您使用的 angular 指令需要一个表达式，因此请尝试从 ng-mouseenter, ng-mouseleave and ng-show 中删除 {{}}。

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

Answer 3

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

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

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

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

angular - 未能在 ng-repeat 中绑定元素的 ng-show

angular - failing to bind element's ng-show inside ng-repeat

angularjs

ng-show