How to toggle between elements in angularJS

Question

I have two elements, only one of them is supposed to show up at a time while the other element stays hidden until the visible element is made to disappear (button click), here an example of the last logic I have tried to use.

.......
<div ng-show='show'>
Visible element
<button ng-click='toggle()'> Toggle </button>
</div>
<div ng-hide='show'>
Hidden Element
</div>

.......

And I have something like this in my controller

........
$scope.show = true;
$scope.toggle = function(){
$scope.show =!$scope.show;
}
.........

Now, anytime I click the button, the first element will disappear but the second element will not show. Please I really need help.

this is working fine as written: plnkr.co/edit/vJVKBkYiI3foDnsaYG7F?p=info. If it's not working in your code, you probably have the two elements in different scopes. You should read up on how the $scope object works in AngularJs, and consider always use a dot in HTML bindings. Also, you might want to move the button outside of the elements that are being toggled, i.e. plnkr.co/edit/a5IBc3THG9hYws5QEVLp — Claies
– Claies, Commented Apr 4, 2018 at 16:04
Read AngularJS Developer Guide - Scope Heirarchies. We can't tell from the code snippets in the queston, but it is likely a scoping issue. — georgeawg
– georgeawg, Commented Apr 4, 2018 at 16:44
Yeah I can see it works fine here, but why isn't it working on my code, what could I be doing wrong? Anyway let me check the angular developer guide — Melody Daniel
– Melody Daniel, Commented Apr 6, 2018 at 12:34

sahil0021 · Accepted Answer · 2018-04-04 16:15:09Z

0

You have to put your button out of the ng-show div like this

<div ng-show='show'>
    <div>Visible element</div>

</div>

<div ng-hide='show'>
    <div>Hidden Element</div>
</div>
<button ng-click='toggle()'> Toggle </button>

then its work fine. Hope this help...

answered Apr 4, 2018 at 16:15

sahil0021

771 silver badge7 bronze badges

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

2 Comments

Melody Daniel Over a year ago

It is still not working, the hidden element doesn't appear

sahil0021 Over a year ago

Its work in my system. You can please check once again in your system

Ravi Ubana · Accepted Answer · 2018-04-04 16:47:31Z

0

Here is the solution

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
$scope.show = true;
$scope.toggle = function(){
$scope.show =!$scope.show;
}
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div ng-show='show'>
    Visible element
  </div>

  <div ng-hide='show'>
    Hidden Element
  </div>
  <button ng-click='toggle()'> Toggle </button>
</body>

</html>

answered Apr 4, 2018 at 16:47

Ravi Ubana

3936 silver badges26 bronze badges

1 Comment

Ravi Ubana Over a year ago

I m able to see ^^ , which browser you're using share screenshot

Collectives™ on Stack Overflow

How to toggle between elements in angularJS

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related