javascript 使用 AngularJs 显示/隐藏元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21856112/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show / Hide elements with AngularJs
提问by Fabrizio Fenoglio
I was trying to show and hide an element child, so when I hover over a <li>element, I set up a ng-showwith value falsefor all the elements. If I try to make the value trueto show, it shows me all the child elements. I just want to display for each element hovered its child:
我试图显示和隐藏一个元素子元素，所以当我将鼠标悬停在一个<li>元素上时，我为所有元素设置了一个ng-show带值false。如果我尝试true显示值，它会显示所有子元素。我只想为悬停在其子项上的每个元素显示：
HTML CODE:
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();
});
回答by Jay Shukla
This is not an angular way. You should do like this.
这不是一种有角度的方式。你应该这样做。
JS
JS
angular.module("firstApp").controller("myCtrl",function($scope) {
$scope.allMenu = ["Profile","Scope","Job","Login","Register"];
});
HTML
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>
回答by dfsq
You don't need any javascript here at all. This is pure CSS task:
您在这里根本不需要任何 javascript。这是纯 CSS 任务：
.menu .list-group-menu + div {
display: none;
}
.menu .list-group-menu:hover + div {
display: block;
}
for HTML:
对于 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>
...
回答by ruedamanuel
You are binding all of the elements to the "show" variable, so when you flip it to true, all elements will show. If you want to use ng-show for that purpose, use an array of objects containing all of the data for the template and an ng-repeat. That will not only solve your problem but also DRY your template. I would slso suggest you look into $element so that you can stick to the angular environment and syntax instead of also having to use jquery.
您将所有元素绑定到“show”变量，因此当您将其翻转为 true 时，所有元素都将显示。如果要为此目的使用 ng-show，请使用包含模板所有数据的对象数组和 ng-repeat。这不仅可以解决您的问题，还可以干燥您的模板。我建议您查看 $element，以便您可以坚持使用 angular 环境和语法，而不必使用 jquery。
