Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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?

share|improve this question
    
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. – ram Oct 10 '16 at 9:13
up vote 0 down vote

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>
share|improve this answer
up vote 0 down vote

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

share|improve this answer
up vote 0 down vote

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>

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.