有沒有辦法在html div上進行ng隱藏？

Question

我試圖隱藏具有ng-click事件的id =“ crossfade”的div。

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>

因此，基本上，每當單擊導航欄中的某項時，我都想隱藏crossfade div。

這是Im使用的代碼行：

<div id= "crossfade" ng-hide="getData('TOPS')">

因此，特別是單擊“ TOPS”時，隱藏div漸變。

加載頁面時，沒有發生這種情況，而是得到了淡入淡出和TOPS數據，並且無法單擊其他任何東西。

Ive還嘗試了ng-if和ng-init。 Ng-init幾乎可以工作，但是我的crossfade並不是在angular.js中實現的，它主要是css。

Answer 1

是的，這絕對是可能的。 ng-hide期望布爾值，為true或false。 getData('Tops')是否在您的控制器中返回布爾值？ 我建議使用$ scope變量而不是函數來控制ng-hide的行為。 因此，在您的getData()函數中，您可以分配以下內容： $scope.hideCrossfade = true; 。

然后，在您的視圖中，只需使用<div id= "crossfade" ng-hide="hideCrossfade"> 。 您可以隨時更改$scope.hideCrossfade = false; 在控制器中重新顯示div。

Answer 2

<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>

並在控制器中

$scope.hideCrossfade = true;

可能在函數getData中。

我建議不要在angular中使用id。 另外，通常也不建議ng-show，ng-hide，ng-if =“ someFunction（）”。

Answer 3

在沒有看到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>

JS

swimwearVisible = false;

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

當您單擊鏈接時，div會很好地顯示和隱藏。 它還將顯示當前狀態以幫助您調試。

Answer 4

如果它們在同一控制器中，則只需將范圍變量設置為ng-hide。 就像是：

$scope.hideCrossfade = false;

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

並在您的html中

<div id="crossfade" ng-hide="hideCrossfade">

如果將標題控制器和內容控制器分開，則需要使用$ broadcast

在您的headerController中：

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

並在您的內容控制器中

var deregisterFn = $scope.$on('hideCrossfade', function($event, hide) {
    $scope.hideCrossfade = hide;
};

有沒有辦法在html div上進行ng隱藏？

問題描述

4 個解決方案

解決方案1
2 已采納 2017-07-17 19:16:34

解決方案2
0 2017-07-17 19:16:21

解決方案3
0 2017-07-17 19:18:08

解決方案4
-2 2017-07-17 19:16:19

有沒有辦法在html div上進行ng隱藏？

問題描述

4 個解決方案

解決方案1 2 已采納 2017-07-17 19:16:34

解決方案2 0 2017-07-17 19:16:21

解決方案3 0 2017-07-17 19:18:08

解決方案4 -2 2017-07-17 19:16:19

解決方案1
2 已采納 2017-07-17 19:16:34

解決方案2
0 2017-07-17 19:16:21

解決方案3
0 2017-07-17 19:18:08

解決方案4
-2 2017-07-17 19:16:19