CODEWITHSUNDEEP
javascriptangularjsonclickangularjs-ng-click
user5571323
user5571323

Reputation:

Why ng-show is not working?

HTML

<div  class="col-sm-1">
    <a class="a" ng-click="aa()">
       <span name="yesLink"></span>
    </a>            
</div>                                                  
<div  class="col-sm-1">
   <a class="a" ng-click="bb()">        
     <span  name="NoLink"></span>           
   </a>
</div>
<div id="nnn" class="col-sm-7" align="left" >
    <p ng-show="yes"> Text for yes</P>
    <p ng-show="no"> Text for no</P>
</div>

JS

yesLink.onclick()=function() 
{
      scope.yes=true;
}

noLink.onclick()=function() 
{
      scope.no=true;
}

I have used the above code.I want to display message according to click.But it is not working. What is wrong with this code? If yesLink is clicked, "Text for yes" should come and if NoLink is clicked ,"Text for no" should come.

Upvotes: 0

Views: 191

Answers (4)

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22905

I think, there is no need to add onclick method. just do this

<div  class="col-sm-1">
<a class="a" ng-click="yes=true">
   <span name="yesLink"></span>
</a>            
</div>                                                  
<div  class="col-sm-1">
   <a class="a" ng-click="yes=false;">        
      <span  name="NoLink"></span>           
    </a>
</div>
<div id="nnn" class="col-sm-7" align="left" >
    <p ng-show="yes"> Text for yes</P>
    <p ng-hide="yes"> Text for no</P>
</div>

Upvotes: 2

byteC0de
byteC0de

Reputation: 5273

No need for jquery, you can use ng-click, ng-click triggers the function in controler

<div  class="col-sm-1">
    <a class="a" ng-click="aa()">
       <span name="yesLink"></span>
    </a>            
</div>                                                  
<div  class="col-sm-1">
   <a class="a" ng-click="bb()">        
     <span  name="NoLink"></span>           
   </a>
</div>
<div id="nnn" class="col-sm-7" align="left" >
    <p ng-show="yes"> Text for yes</P>
    <p ng-show="no"> Text for no</P>
</div>

JS

scope.aa() = function(){
   scope.yes = true;
}

scope.bb() = function(){
   scope.no = true;
}

Upvotes: 0

kamaleshts
kamaleshts

Reputation: 65

I see Angular is being used in the above code so the HTML part will be

your controller part should be something like

Considering bb() and aa() as a click function

$scope.bb = function(){
 $scope.yes = true;
}

$scope.aa = function(){
 $scope.no = true;
}

Upvotes: 1

Ross Rawlins
Ross Rawlins

Reputation: 686

The value you are checking against is a boolean but the value you are assigning to the variable is a string. You have two options>

OPTION 1: Tell the ng-hide/show value to look for the string value, ng-show="yes === 'true'".

OPTION 2: In your function swap out the strings for boolean values, scope.yes = true and NOT scope.yes="true"

Upvotes: 0

Related Questions