有没有办法在html div上进行ng隐藏？_Html_Angularjs_Ng Hide_Ng Init

有没有办法在html div上进行ng隐藏？

html angularjs

有没有办法在html div上进行ng隐藏？,html,angularjs,ng-hide,ng-init,Html,Angularjs,Ng Hide,Ng Init,我试图隐藏id为=“crossfade”的div，其中有ng click事件 1）这可能吗？ 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=

我试图隐藏id为=“crossfade”的div，其中有ng click事件

1）这可能吗？ 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>


店顶

泳衣
顶
屁股
服装
鞋
配件
如果它们在同一控制器中，您可以将范围变量设置为ng hide。比如：
$scope.hideCrossfade = false;

function getData(mType) {
    $scope.hideCrossfade = true;
}

在你的html中
<div id="crossfade" ng-hide="hideCrossfade">

在您的内容控制器中
var deregisterFn = $scope.$on('hideCrossfade', function($event, hide) {
    $scope.hideCrossfade = hide;
};

如果它们在同一控制器中，您可以将范围变量设置为ng hide。比如：
$scope.hideCrossfade = false;

function getData(mType) {
    $scope.hideCrossfade = true;
}

在你的html中
<div id="crossfade" ng-hide="hideCrossfade">

在您的内容控制器中
var deregisterFn = $scope.$on('hideCrossfade', function($event, hide) {
    $scope.hideCrossfade = hide;
};

可能在函数getData中
我建议不要在angular中使用ID。
此外，通常也不鼓励使用ng show、ng hide、ng if=“someFunction（）”
可能在函数getData中
我建议不要在angular中使用ID。
此外，通常也不鼓励使用ng show、ng hide、ng if=“someFunction（）”。
是的，这绝对是可能的ng hide
需要一个布尔值，为true或false。getData（'Tops'）
是否在控制器中返回布尔值？我建议使用$scope变量而不是函数来控制ng hide
的行为。因此，在getData（）
函数中，可以指定如下内容：$scope.hideCrossfade=true
在您看来，只需使用
。您可以随时更改$scope.hideCrossfade=false以使div再次可见
 是的，这绝对是可能的ng hide
需要一个布尔值，为true或false。getData（'Tops'）
是否在控制器中返回布尔值？我建议使用$scope变量而不是函数来控制ng hide
的行为。因此，在getData（）
函数中，可以指定如下内容：$scope.hideCrossfade=true
在您看来，只需使用
。您可以随时更改$scope.hideCrossfade=false以使div再次可见
 如果不查看getData
函数，就很难准确地找出问题所在，但从我所看到的情况来看，这里有一些建议
首先，永远不要绑定到函数，因为它很难调试，而且在性能方面代价高昂
这里有一个可行的解决方案。我建议为每个项目硬编码属性或使用数组。为了简单起见，我在这里使用了一个属性
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>

如果一切正常，单击链接时div将显示和隐藏。它还将显示当前状态以帮助您进行调试。
如果不查看getData
函数，就很难准确地找出错误所在，但从我看到的情况来看，这里有一些建议
首先，永远不要绑定到函数，因为它很难调试，而且在性能方面代价高昂
这里有一个可行的解决方案。我建议为每个项目硬编码属性或使用数组。为了简单起见，我在这里使用了一个属性
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>

如果一切正常，单击链接时div将显示和隐藏。它还将显示当前状态，以帮助您进行调试。以这种方式使用广播是过分的，不是一个简单的解决方案。如果它们位于单独的控制器中，您肯定应该使用广播否，您几乎不应该使用广播。就性能而言，它凌乱且昂贵。控制器间通信的最佳方式是使用服务，或者更好的是，采用组件模型并使用单向绑定和函数调用。然后用您的方式提出解决方案？我有，但由于所有内容都在一个控制器中，因此不应使用组件或广播。如果你在屏幕上构建了一个包含许多组件的应用程序，你会发现随意使用广播会导致应用程序速度减慢。以这种方式使用广播是一种过激的做法，而不是一个简单的解决方案。如果它们位于不同的控制器中，你肯定应该使用广播。不，你几乎不应该使用广播。就性能而言，它凌乱且昂贵。控制器间通信的最佳方式是使用服务，或者更好的是，采用组件模型并使用单向绑定和函数调用。然后用您的方式提出解决方案？我有，但由于所有内容都在一个控制器中，因此不应使用组件或广播。如果你曾经在屏幕上构建了一个包含很多组件的应用程序，你会发现自由地使用广播会导致应用程序速度减慢
swimwearVisible = false;

showSwimwear(){
    this.swimwearVisible = !this.swimwearVisible;
}