javascript - 使用 AngularJs 显示/隐藏元素

Question

我试图显示和隐藏一个元素子元素，所以当我将鼠标悬停在 <li> 上时元素，我设置了一个 ng-show值(value)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>

JQUERY 代码:

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

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

});

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

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

});

Answer 1

这不是一种 Angular 方式。你应该这样做。

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>