Why ng-show is not working?

Question

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.

Answer 1

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>

Answer 2

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;
}

Answer 3

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"

Answer 4

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;
}