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.

Mistalis · Accepted Answer · 2017-01-17 15:00:22Z

2

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

answered Jan 17, 2017 at 15:00

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

firassasin · Accepted Answer · 2017-01-17 15:24:11Z

0

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

answered Jan 17, 2017 at 15:24

firassasin

1

Comments

Eric Ferreira · Accepted Answer · 2017-01-17 16:54:21Z

0

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.

answered Jan 17, 2017 at 16:54

Eric Ferreira

1,96818 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to convert this jQuery code in an AngularJS code?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related