angular show and hide関数

Question

私は、角度を使ってショーと関数を作成しました。現時点では、私は基本が働いている。ユーザーがタイルの上を移動すると、クラスが追加され、削除されます。

<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クラスが個別にではなくすべての要素に追加されます。

角度コード

私が個別にisVisbleクラスをターゲットにすることができますどのように

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

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

？

<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]; 
    } 

そして：

Answer 1

が配列

$scope.array = []; 

配列へのプッシュそれを持っていないなぜそれが配列からときmouseleaveイベント

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

あなたは `NG-show`と` NG-hide`を使用していないのはなぜ

NG-クラスで使用する、この条件を

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

Answer 2

あなたのような何かを行うことができ

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

をそして、記事ごとに一意のブロックIDを持っています。

Answer 3

ときのMouseEnterイベント

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

スライス2つのスタイル

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

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