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


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

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

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


How can I target the isVisble class individually?

Answer

Have an array

$scope.array = [];

push it to array when mouseenter event

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

slice it from array when mouseleave event

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

use this condition in ng-class

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