1

i am creating a web app in which i have four button

1)click here

2) here click

3) (hide button) show click here

4) (hide button) show here click

3rd and 4th buttons are hide

what i want is__________________

when i click on 1st button 3rd button should be visible and when i click on 2nd button 4th button should be visible here is my code 

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ng-show-production</title>
  <link href="glyphicons.css" rel="stylesheet" type="text/css">
  <link href="animations.css" rel="stylesheet" type="text/css">


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>



</head>
<body ng-app="ngAnimate">


<div>


<button ng-model="clickedh">Click here</button>
  <button ng-model="clickede">here click</button>
  </div>

<div>
 <button ng-hide="true" ng-show="clickedh">show click here</button>
  <button ng-hide="true" ng-show="clickede">show here click</button>

</div>
</body>
</html>

but it is not working what do i need to do?

Improve this question
1
  • Use either ng-hide or ng-show in your 3rd and 4th button. Don't hrad code "true". Insted bind the ng-hide values in the click event of 1st and 2nd button(using ng-click). That makes sense. Commented Oct 10, 2016 at 9:13

5 Answers 5

Reset to default
1

ng-hide is expecting an expression, not a value. If you want ng-hide to evaluate to true by using "true", then you need to wrap true in single quotes as well.

try ng-hide = "'true'"

The right way to do this however is to put a variable on the scope.

So you should really do something like this (possibly in your controller):

$scope.show_me = true;

Then in your template you can do something like this:

<div ng-show = "show_me">HI</div>
<div ng-hide = "!show_me">HI, I'm showing too! (because of the ! operator)</div>

Then in your button you can do something like this:

<button ng-click = "show_me = !show_me">Toggle the Thing</button>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Try it: At first initialize your app module in the scripts. Then you should declare a controller that you will need another operation. And i have used ng-init to set default value(bool) of each variable that will need to define show true/false. You can do it form controller. 

var app = angular.module('ngAnimate', []); //init your app module
app.controller('myCtrl', function($scope) { // a controller
   
});
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Example - example-ng-show-production</title>
        <link href="glyphicons.css" rel="stylesheet" type="text/css">
        <link href="animations.css" rel="stylesheet" type="text/css">

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    </head>
    <body ng-app="ngAnimate" ng-controller="myCtrl">
        <div>
            <button ng-init="clickedh=false" ng-click="clickedh=!clickedh">Click here</button>
            <button ng-init="clickede=false" ng-click="clickede=!clickede">here click</button>
        </div>
        <div>
            <button ng-show="clickedh">show click here</button>
            <button ng-show="clickede">show here click</button>
        </div>
      
    </body>
</html>

Improve this answer

Comments

0

Change your buttons to this

<button ng-init="clickedh=false" ng-model="clickedh"  ng-click="clickedh=true">Click here</button>
  <button ng-model="clickede" ng-init="clickede=false" ng-click="clickede=true">here click</button>


<button ng-show="clickedh">show click here</button>
  <button ng-show="clickede">show here click</button>

Don't use ng-hide and ng-show at the same time

You can also set true and false value from your controller if you want to avoid using ng-init

FIDDLE

Improve this answer

Comments

0

For the click option(click here & here click)of those button, We need to provide ng-click function on those button html.

Then to show the 3rd or 4th button on clicking 1st or 2nd respectively, We have to call ng-show for 3rd and 4th button. 

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ng-show-production</title>
  <link href="glyphicons.css" rel="stylesheet" type="text/css">
  <link href="animations.css" rel="stylesheet" type="text/css">


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>



</head>
<body ng-app="ngAnimate">
<p>This code is working fine :)</p>

<div>
<button ng-model="clickedh" ng-click="clickedh=true">Click here</button>
  <button ng-model="clickede"  ng-click="clickede=true">here click</button>
  </div>

<div>
 <button  ng-show="clickedh">show click here</button>
  <button ng-show="clickede">show here click</button>

</div>
</body>
</html>

Improve this answer

1 Comment

Hi, If possible try to add a description to your answer approach. Thanks.
0

Try this method:

<div ng-init="showButton=true"/>
<div ng-show="showText">Text</div>
<button ng-Click="showText=true;showButton=!showButton" ng-show="showButton">Show</button>
<button ng-Click="showText=false;showButton=!showButton" ng-show="!showButton">Hide</button>

Hope that helps ;)

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.