Question

以下代码显示鼠标悬停时的div，但不会在鼠标离开时隐藏div。如何更正代码？

<html ng-app="">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<center>
    <br>
    <p ng-model="x" ng-mouseover="x='true'" ng-mouseleave="x='false'">HOVER HERE</p>
    <br>
    {{x}}
    <div ng-show="x" style="position: relative;top: 100px;left: 0px;width: 100px;height: 100px;background-color: grey;"></div>

</center>

Answer 1

<html ng-app="">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<center>
    <br>
    <p ng-model="x" ng-mouseover="x=true" ng-mouseleave="x=false">HOVER HERE</p>
    <br>
    {{x}}
    <div ng-show="x" style="position: relative;top: 100px;left: 0px;width: 100px;height: 100px;background-color: grey;"></div>

</center>

我所做的唯一更改是x='true'到x=true。（删除了单引号）。当引号出现时，x被设置为字符串。因此，在评估ng-show='x'时，x始终是一个字符串，并始终评估为真值。

如何在ng-mouseover上显示div并在ng-mouseleave上隐藏相同的div？

1 个答案: