CODEWITHSUNDEEP
javascripthtmlangularjs
Shijin TR
Shijin TR

Reputation: 7788

Angularjs ng-show on ng-click not working

I have created a button like with angularjs,

 <button class="btn btn-setting" ng-click="showSearch = ! showSearch" > 
  <img src="theme/images/settings.png" width="111">
 </button>

And a div like ,

<div  ng-include="'pages/include/search.html'" ng-show="showSearch" ></div>

I need to toggle the visibility of the above div on the button click.but it is not showing.

Upvotes: 2

Views: 2164

Answers (4)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15290

Update the showSearch model as follows 

$scope.showSearch = {hideShowSearch : false}

Updated HTML

<button class="btn btn-setting" ng-click="showSearch.hideShowSearch = ! showSearch.hideShowSearch" > 
  <img src="theme/images/settings.png" width="111">
 </button>

 <div  ng-show="showSearch.hideShowSearch" >This is the test</div>



EDIT -

In your script hideShowSearch is primitive one.So it does not perform two way data-binding.As result you not getting expected result.

Upvotes: 1

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

First check these two elements (<button> & <div>) inside two ng-controllers

If so this will not work since ng-controllers have their own scopes. So that showSearch is in one scope and other controller scope do not have direct access to it.

Then check something like,

<div ng-show='showSearch'>show / hide div ...</div>

and see if this div is toggling its visibility.

if it working properly

then check the path to src of ng-include is correct.

here is a DEMO

Upvotes: 0

michelem
michelem

Reputation: 14590

Here is a simple JSFiddle

<button class="btn btn-setting" ng-init="showSearch = true" ng-click="showSearch = (showSearch) ? false : true;" > 
    <img src="theme/images/settings.png" width="111" />
</button>

<div ng-show="showSearch">Hello World</div>

Upvotes: 0

stackg91
stackg91

Reputation: 594

Just do 

<button ng-click="setshowme(show)"></button>

$scope.setshowme = function (value) {
    if(value == true){
      $scope.show = false;
    }else{
      $scope.show = true
    }
}

Upvotes: 0

Related Questions