Question

我试图展示并隐藏元素子元素，因此当我将鼠标悬停在<li>元素上时，我会为所有元素设置值为ng-show的{{1}}。如果我尝试显示值false，它会显示所有子元素。我只想显示每个元素徘徊其孩子：

HTML CODE：

true

JQUERY CODE：

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

Answer 1

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

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

Answer 2

你根本不需要任何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>
    ...

Answer 3

您将所有元素绑定到“show”变量，因此当您将其翻转为true时，将显示所有元素。如果要将ng-show用于此目的，请使用包含模板和ng-repeat所有数据的对象数组。这不仅可以解决您的问题，还可以干燥您的模板。我会建议你调查$ element，这样你就可以坚持使用角度环境和语法，而不必使用jquery。

使用AngularJs显示/隐藏元素

3 个答案: