CODEWITHSUNDEEP
javascriptangularjs
jmhostalet
jmhostalet

Reputation: 4649

Angularjs -> ng-click and ng-show to show a div

I am trying just to display a div when user press a button, seems to be easy, but after spent a lot of time I am getting really crazy with this. My code is

My fiddle: http://jsfiddle.net/jmhostalet/4WK7R/1/

<div ng-app>
    <div ng-controller="MyCtrl">
        <div><button id="mybutton" ng-click="showAlert()">Click me</button></div>
        <div>Value: {{myvalue}}</div>
        <div><div ng-show="myvalue" class="hideByDefault">Here I am</div></div>
    </div>
</div>

and my controller

function MyCtrl($scope) {

  $scope.myvalue = false;

  $scope.showAlert = function(){
    $scope.myvalue = true;  
  };
}

Thank you!

Upvotes: 26

Views: 139202

Answers (11)

Pikesh Prasoon
Pikesh Prasoon

Reputation: 387

I implemented it something this way

Controller function:

app.controller("aboutController", function(){
this.selected = true;
this.toggle = function(){
  this.selected = this.selected?false:true;
}
});

HTML:

<div ng-controller="aboutController as about">
 <div ng-click="about.toggle()">Click Me to toggle the Fruits Name</div>
 <div ng-show ="about.selected">Apple is a delicious fruit</div>
</div>

Upvotes: 0

Vivek Sharma
Vivek Sharma

Reputation: 597

Very simple just do this:

<button ng-click="hideShow=(hideShow ? false : true)">Toggle</button>

<div ng-if="hideShow">hide and show content ...</div>

Upvotes: 5

MAFAIZ
MAFAIZ

Reputation: 691

<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope) {
            //This will hide the DIV by default.
            $scope.IsVisible = false;
            $scope.ShowHide = function () {
                //If DIV is visible it will be hidden and vice versa.
                $scope.IsVisible = $scope.IsVisible ? false : true;
            }
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <input type="button" value="Show Hide DIV" ng-click="ShowHide()" />
        <br />
        <br />
        <div ng-show = "IsVisible">My DIV</div>
    </div>
</body>
</html>

EXAMPLE : - http://jsfiddle.net/mafais/4WK7R/380/

Upvotes: 13

calraiden
calraiden

Reputation: 1828

I think you can create expression to show or hide

<div ng-app>
    <div ng-controller="MyCtrl">
        <div><button id="mybutton" ng-click="myvalue = myvalue == true ? false : true;">Click me</button></div>
        <div>Value: {{myvalue}}</div>
        <div><div ng-show="myvalue" class="hideByDefault">Here I am</div></div>
    </div>
</div>

Upvotes: 1

Praveen Srinivasan
Praveen Srinivasan

Reputation: 1620

This will solve the problem. No need to write code in controller. And remove your css styles display:none

<div><button id="mybutton" ng-click="myvalue=true">Click me</button></div>

Upvotes: 4

www.world360.in
www.world360.in

Reputation: 11

Just remove css from your js fiddle,use the myvaue === true. 

<div ng-show="myvalue == true" class="ng-cloak">Here I am</div>

Upvotes: 1

dfsq
dfsq

Reputation: 193311

If you want to make sure your div is not visible by default use ng-cloak class instead. It will work properly with ngShow directive:

<div><div ng-show="myvalue" class="ng-cloak">Here I am</div></div>

Demo: http://jsfiddle.net/4WK7R/4/

Upvotes: 1

Akxe
Akxe

Reputation: 11585

You can use the ng-class tag. Have a look http://jsfiddle.net/4WK7R/3/

Upvotes: 0

Nish
Nish

Reputation: 1746

remove class hideByDefault. Div will remain hidden itself till value of myvalue is false.

Upvotes: 0

Vladimir Gordienko
Vladimir Gordienko

Reputation: 3470

Just remove css from your js fiddle, ng-show will controll it. AngularJS sets the display style to none (using an !important flag). And remove this class when it must be shown.

Upvotes: 0

Lukas S.
Lukas S.

Reputation: 5758

Just get rid of the display: none; from your CSS. AngularJS is in control of showing/hiding that div.

If you want to hide it by default, just set the value of scope.myvalue to false initially - which you're already doing.

Upvotes: 13

Related Questions