有没有办法在html div上进行ng隐藏？
[英]Is there a way to do a ng-hide on a html div?
问题描述
I am trying to hide my div that has id="crossfade" where there is an ng-click event. 
我试图隐藏具有ng-click事件的id =“ crossfade”的div。
1) Is this possible? 1）这可能吗？ 2) What am I doing wrong? 2）我在做什么错？
<!DOCTYPE html>
<html lang="en" ng-app="myContent">
<head>
<meta charset="UTF-8">
<title>ShopME Tops</title>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js
"></script>
<script type="text/javascript" src="myscript.js"></script>
</head>
<body ng-controller="ContentController">
<header>
<div class="header-inner2">
<nav>
<ul class="center">
<li><a ng-click="getData('SWIMWEAR')">SWIMWEAR</a></li>
<li><a ng-click="getData('TOPS')">TOPS</a></li>
<li><a ng-click="getData('BOTTOMS')">BOTTOMS</a></li>
<li><a ng-click="getData('DRESSES')">DRESSES</a></li>
<li><a ng-click="getData('SHOES')">SHOES</a></li>
<li><a ng-click="getData('ACCESSORIES')">ACCESSORIES</a
</li>
</ul>
</nav>
</div>
</header>
<!-- crossfade images-->
<div id= "crossfade" ng-hide="getData('TOPS')">
<img src="images/cover1.png" alt="#">
<img src="images/cover2.png" alt="#">
<img src="images/cover3.png" alt="#">
<img src="images/cover4.png" alt="#">
<img src="images/cover5.png" alt="#">
</div>
<!-- Container for grid layout -->
<div class="container">
<div class="row">
<div class="col" ng-repeat="x in filtered | limitTo:4">
<img class="img-responsive1" ng-src="{{x.source}}" alt="#">
</div>
</div>
</div>
</body>
</html>
So basically, anytime something in the nav bar is clicked I want to hide the crossfade div. 因此，基本上，每当单击导航栏中的某项时，我都想隐藏crossfade div。
Here is the line of code that Im working with : 这是Im使用的代码行：
<div id= "crossfade" ng-hide="getData('TOPS')">
So in particular, when TOPS is clicked hide the div crossfade. 因此，特别是单击“ TOPS”时，隐藏div渐变。
Instead of this happening when I load the page I get my crossfade and my TOPS data and I cant click on anything else. 加载页面时，没有发生这种情况，而是得到了淡入淡出和TOPS数据，并且无法单击其他任何东西。
Ive also experimented with ng-if and ng-init. Ive还尝试了ng-if和ng-init。 Ng-init almost worked but my crossfade isnt implemented in angular.js it is mainly css. Ng-init几乎可以工作，但是我的crossfade并不是在angular.js中实现的，它主要是css。
4 个解决方案
解决方案1
2 已采纳 2017-07-17 19:16:34
Yes this is definitely possible. 是的，这绝对是可能的。 ng-hide expects a boolean value, either true or false. ng-hide期望布尔值，为true或false。 Is getData('Tops') returning a boolean in your controller? getData('Tops')是否在您的控制器中返回布尔值？ I would recommend using a $scope variable rather than a function to control the behavior of ng-hide . 我建议使用$ scope变量而不是函数来控制ng-hide的行为。 So in your getData() function, you could assign something like: $scope.hideCrossfade = true; 因此，在您的getData()函数中，您可以分配以下内容： $scope.hideCrossfade = true; . 。
Then in your view, just use <div id= "crossfade" ng-hide="hideCrossfade"> . 然后，在您的视图中，只需使用<div id= "crossfade" ng-hide="hideCrossfade"> 。 You can always change $scope.hideCrossfade = false; 您可以随时更改$scope.hideCrossfade = false; in your controller to make the div visible again. 在控制器中重新显示div。
解决方案2
0 2017-07-17 19:16:21
<div id= "crossfade" ng-hide="hideCrossfade">
<img src="images/cover1.png" alt="#">
<img src="images/cover2.png" alt="#">
<img src="images/cover3.png" alt="#">
<img src="images/cover4.png" alt="#">
<img src="images/cover5.png" alt="#">
</div>
and in the controller set 并在控制器中
$scope.hideCrossfade = true;
probably inside the function getData. 可能在函数getData中。
I would recommend not using ids in angular. 我建议不要在angular中使用id。 Also, ng-show, ng-hide, ng-if = "someFunction()" is also generally discouraged. 另外，通常也不建议ng-show，ng-hide，ng-if =“ someFunction（）”。
解决方案3
0 2017-07-17 19:18:08
It's a little hard to figure out exactly what is wrong without seeing the getData function but from what I can see, heres some suggestions 在没有看到getData函数的情况下很难弄清楚到底是什么问题，但是从我所看到的是，这里有一些建议
Firstly, never bind to a function, its hard to debug and its costly performance wise. 首先，永远不要绑定到一个函数，它很难调试并且它的性能代价高昂。
Here is a solution that will work. 这是一个可行的解决方案。 I'd suggest either hard coding properties for each item or use an array. 我建议为每个项目设置硬编码属性或使用数组。 I've used a single property here for simplicity. 为了简单起见，我在这里使用了一个属性。
HTML 的HTML
<header>
<div class="header-inner2">
<nav>
<ul class="center">
<li><a ng-click="showSwimwear()">SWIMWEAR</a></li>
...
</ul>
</nav>
</div>
</header>
<div id= "crossfade" ng-hide="swimwearVisible">
<img src="images/cover1.png" alt="#">
...
</div>
JS JS
swimwearVisible = false;
showSwimwear(){
this.swimwearVisible = !this.swimwearVisible;
}
All being well the div will show and hide when you click the link. 当您单击链接时，div会很好地显示和隐藏。 It'll also show the current state to help you debug. 它还将显示当前状态以帮助您调试。
解决方案4
-2 2017-07-17 19:16:19
If they are in the same controller you can just set a scope variable to ng-hide. 如果它们在同一控制器中，则只需将范围变量设置为ng-hide。 something like: 就像是：
$scope.hideCrossfade = false;
function getData(mType) {
$scope.hideCrossfade = true;
}
and in your html 并在您的html中
<div id="crossfade" ng-hide="hideCrossfade">
If your header controller and content controller are split up, you will want to use a $broadcast 如果将标题控制器和内容控制器分开，则需要使用$ broadcast
in your headerController: 在您的headerController中：
$scope.getData = function(mType) {
$scope.$broadcast('hideCrossfade', true);
};
and in your content controller 并在您的内容控制器中
var deregisterFn = $scope.$on('hideCrossfade', function($event, hide) {
$scope.hideCrossfade = hide;
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.