有没有办法在html div上进行ng-hide隐藏? [英] Is there a way to do a ng-hide on a html div?
问题描述
我正在尝试隐藏具有ng-click事件的id ="crossfade"的div.
I am trying to hide my div that has id="crossfade" where there is an ng-click event.
1)这可能吗? 2)我做错了什么?
1) Is this possible? 2) What am I doing wrong?
<!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>
因此，基本上，每当单击导航栏中的某项时，我都想隐藏crossfade div.
So basically, anytime something in the nav bar is clicked I want to hide the crossfade div.
以下是我正在使用的代码行:
Here is the line of code that Im working with :
<div id= "crossfade" ng-hide="getData('TOPS')">
特别是，当单击TOPS时，隐藏div交叉淡入淡出.
So in particular, when TOPS is clicked hide the div crossfade.
加载页面时，我得到的是淡入淡出和TOPS数据，而不是其他任何事情.
Instead of this happening when I load the page I get my crossfade and my TOPS data and I cant click on anything else.
我还尝试了ng-if和ng-init. Ng-init几乎可以工作，但是我的crossfade并不是在angular.js中实现的，它主要是css.
Ive also experimented with ng-if and ng-init. Ng-init almost worked but my crossfade isnt implemented in angular.js it is mainly css.
推荐答案
是的，这绝对是可能的. ng-hide期望布尔值，为true或false. getData('Tops')是否在您的控制器中返回布尔值?我建议使用$ scope变量而不是函数来控制ng-hide的行为.因此，在您的getData()函数中，您可以分配类似以下内容的内容:$scope.hideCrossfade = true;.
Yes this is definitely possible. ng-hide expects a boolean value, either true or false. Is getData('Tops') returning a boolean in your controller? I would recommend using a $scope variable rather than a function to control the behavior of ng-hide. So in your getData() function, you could assign something like: $scope.hideCrossfade = true;.
然后在您的视图中，只需使用<div id= "crossfade" ng-hide="hideCrossfade">.您始终可以在控制器中更改$scope.hideCrossfade = false;以使div再次可见.
Then in your view, just use <div id= "crossfade" ng-hide="hideCrossfade">. You can always change $scope.hideCrossfade = false; in your controller to make the div visible again.
这篇关于有没有办法在html div上进行ng-hide隐藏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
