本文介绍了有没有办法在html div上进行ng-hide隐藏?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试隐藏具有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隐藏?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-25 19:51