How to convert this jQuery code in an AngularJS code?

Question

I'm facing the following issue: I'm working with Angular1.x and I have a subpage with small, clickable images and some other stuff below these imgs.
Only the images should be visible, all the other things should be hidden.
When the user clicks on an image, this hidden-visible has to flip, so the whole image session goes hidden and the content below comes visible.

I have a jQuery solution, but I'm seeking a more semantic one with Angular.

(function($){ $(document).ready(function(){ $('.showOverlay').click(function(){ $('#container').hide(); $('#box').show(); }); $('.hideOverlay').click(function(){ $('#container').show(); $('#box').hide(); }); }); })(jQuery); 

I hope this piece of code explains the idea behind.

Answer 1

When you click "Show overlay", it will call the showOverlay() function, same for "Hide overlay":

<div ng-click="showOverlay()">Show overlay</div> <div ng-click="hideOverlay()">Hide overlay</div> <div ng-show="container">Shown when $scope.container is true</div> <div ng-show="box">Shown when $scope.box is true</div> 

Add the following functions in your controller:

$scope.showOverlay = function() { $scope.container = false; $scope.box = true; } $scope.hideOverlay = function() { $scope.container = true; $scope.box = false; } 

Answer 2

I would suggest using ng-hide:

in your html

<div ng-hide="myValue"></div> <button ng-click="show()">show</button <button ng-click="hide()">hide</button 

then in your javascript:

$scope.show = function(){ $scope.myValue = false; } $scope.hide = function(){ $scope.myValue = true; } 

Answer 3

Is there any instance when both the container and box should be visible? If not, I dare say you should use the same variable for both of them, like so:

<img ng-src="{{img}}.png" ng-click="hideImage()" ng-show="imageShown"> <div ng-click="showImage()" ng-show="!imageShown"> 

And in your controller:

$scope.hideImage = function() { $scope.imageShown = false } $scope.showImage = function() { $scope.imageShown = true } 

Maintaining two variables for values that always mirror each other just seems irresponsible.