角度顯示和隱藏功能

我已經使用Angular創建了一個顯示和功能。目前我的基礎工作。當用戶將鼠標懸停在平鋪上時，該類將被添加並刪除。角度顯示和隱藏功能

<article class="col-sm-6" ng-mouseenter="showHiddenTile()" ng-mouseleave="hideHiddenTile()">     
    <div class="grid-block--img"> 
     <img src="/assets/homepage/home-tile5.png"> 
     <div class="grid-headings"> 
      <h2>a new<br/>home for<br/>whiskey</h2> 
      <p><span class="heading--bold">WORK.</b><span>&nbsp;Food and Beverage Design< 
     </div> 
     <div class="grid-block-hidden" ng-class="{isVisble: tileBlock}">My overlay</div> 
    </div> 
</article>

我想在整個網站中多次使用此顯示和隱藏功能。在我將鼠標懸停在其中一個元素上時，它將isActive類添加到所有元素，而不是單獨添加。

角碼

// SHOW AND HIDE FUNCTION 
    $scope.showHiddenTile = function() { 
    $scope.tileBlock = true; 
} 

$scope.hideHiddenTile = function() { 
    $scope.tileBlock = false; 
}

我怎麼能個別指定isVisble類？

來源

2016-08-25 NewKidOnTheBlock

你爲什麼不使用'NG-show'和'NG-hide'？ – Weedoze

我想創建一個轉換使用css – NewKidOnTheBlock

不能讓你。更多的解釋 –

有一個數組

$scope.array = [];

推它數組時MouseEnter事件

function showMethod(element){ 
    $scope.array.push(element); 
}

片從陣列當鼠標離開事件

function hideMethod(element){ 
    $scope.array.slice($scope.array.indexOf(element),1);  
}

利用這個條件納克級

ng-class="array['blockName'] != -1"

來源

2016-08-25 09:10:47

你可以提供一個codepen示例 – NewKidOnTheBlock

你可以這樣做：

<article class="col-sm-6" ng-mouseenter="showHiddenTile('block-id')" ng-mouseleave="hideHiddenTile('block-id')">

和：

$scope.showHiddenTile = function(blockId) { 
    $scope.tileBlock[blockId] = true; 
    } 

    $scope.hideHiddenTile = function(blockId) { 
    $scope.tileBlock[blockId] = false; 
    } 

    $scope.isShowTitle = function(blockId) { 
    return $scope.tileBlock[blockId]; 
    }

和：

<div class="grid-block-hidden" ng-class="{isVisble: isShowTitle('block-id'}">My overlay</div>

然後要有每篇文章的唯一塊ID。

來源

2016-08-25 09:03:34

爲什麼不能有2款

.grid-block-hidden{ 
    //style when mouse is not on 
} 

grid-block-hidden:hover{ 
    //style on hover 
    //isVisble class 
}

來源

2016-08-25 09:06:28 jayanthCoder

角度顯示和隱藏功能

回答

相關問題