NewKidOnTheBlock NewKidOnTheBlock - 4 months ago 37
AngularJS Question

angular show and hide function

I have created a show and function using Angular. At the moment i have the basics working. When the user hovers over tile the class is added and removed.

<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 class="grid-block-hidden" ng-class="{isVisble: tileBlock}">My overlay</div>

I want to use this show and hide function multiple times throughout the site. At the moment when I hover over one of the elements it adds the isActive class to all elements instead of individually.

Angular code

$scope.showHiddenTile = function() {
$scope.tileBlock = true;

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

How can I target the isVisble class individually?


Have an array

$scope.array = [];

push it to array when mouseenter event

function showMethod(element){

slice it from array when mouseleave event

function hideMethod(element){

use this condition in ng-class

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