使用AngularJs显示/隐藏元素

Question

我试图显示和隐藏元素子元素,所以当我将鼠标悬停在<li>元素上时,我为所有元素设置了一个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>

JQUERY CODE:

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

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

});

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

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

});

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>