Javascript 使用AngularJs显示/隐藏元素

我试图显示和隐藏一个元素子元素，因此当我将鼠标悬停在

元素上时，我为所有元素设置了一个

ng show

，值为

false

。如果我试图使值

为true

以显示，它将显示所有子元素。我只想为每个悬停在其子元素上的元素显示：

HTML代码：

<ul ng-init="show=false">
    <li>
        <a class="list-group-menu" href="#"><div class="icon-user"></div></a>
        <div ng-show="show"> Profile </div>
    </li>
    <li>
        <a class="list-group-menu" href="#"><div class="icon-scope"></div></a>
        <div ng-show="show"> Scope </div>
    </li>
    <li>
        <a class="list-group-menu" href="#"><div class="icon-job"></div></a>
        <div ng-show="show"> Job </div>
    </li>

    <li>
        <a class="list-group-menu" href="#"><div class="icon-login"></div>
            <div ng-show="show"> Login </div>
        </a>
    </li>
    <li>
    <a class="list-group-menu" href="#"><div class="icon-register"></div></a>
     <div ng-show="show"> Register </div>
    </li>
</ul>

$('ul li').mouseenter(function() {

   $(this).children('div').show();

});

$('ul li').mouseleave(function() {

   $(this).children('div').hide();

});

---

这不是一个角度的方式。你应该这样做

JS

angular.module("firstApp").controller("myCtrl",function($scope) {
    $scope.allMenu = ["Profile","Scope","Job","Login","Register"];
});

HTML

<ul ng-controller="myCtrl">
    <li ng-repeat="menuName in allMenu" ng-mouseenter="show=true" ng-mouseleave="show=false">
        <a class="list-group-menu" href="#"><div class="icon-user"></div></a>
        <div ng-show="show"> {{menuName}} </div>
    </li>
</ul>

{{menuName}}

您正在将所有元素绑定到“show”变量，因此当您将其翻转为true时，所有元素都将显示。

---

如果要为此使用ng show，请使用包含模板所有数据的对象数组和ng repeat。这不仅可以解决您的问题，还可以干燥您的模板。我建议您研究一下$element，这样您就可以坚持使用angular环境和语法，而不必使用jquery。

这里根本不需要任何javascript。这是纯CSS任务：

.menu .list-group-menu + div {
    display: none;
}
.menu .list-group-menu:hover + div {
    display: block;
}

对于HTML：

<ul class="menu">
    <li>
        <a class="list-group-menu" href="#">
            <div class="icon icon-user">User</div>
        </a>
        <div>Profile</div>
    </li>
    <li>
        <a class="list-group-menu" href="#">
            <div class="icon icon-scope">Scope</div>
        </a>
        <div>Scope</div>
    </li>
    ...

轮廓


范围

...

哦，对不起，我对angularJs真的很陌生。这个解决方案很有意义，但是你怎么能看出我在

元素中有不同的类，我只需要创建一个类似这样的对象

var allMenu={[“name”：“profile”，“icon”：“icon user”]}

Fabrizio；是的，试试看。虽然更可能的情况是allMenu=[{name:'test'，custom_class:'specific_class'}，{..}]，但正如Erti Chris所说，您可以使用ng class='{custom_class}'。读这篇文章听起来不错，谢谢你的这个技巧，但这篇文章只是一个让你理解angularJs是如何完成这项工作的问题当然若您不想在控制器中定义一个项目数组，那个么您需要编写一个指令。