manjeet lama manjeet lama - 13 days ago 4
AngularJS Question

ng-show value change to true false but ng-show does not work

i am trying to show/hide the division based on the selection of type(using the radio button).

Following is the code for the radio buttons :

<div class="col-md-7 checkbox-inline" >
<label><input type="radio" id="authentication-type" ng-model="authenticationType" name="authenticationType" checked value="itas">ITAS</label>
<label><input type="radio" id="authentication-type" ng-model="authenticationType" name="authenticationType" value="ldap">LDAP</label>
</div>


The non-working version

Here i am trying to remove the case sensitivity while comparison. The value of the expressions

{{ (authenticationType | lowercase) == 'itas' }}
{{ (authenticationType | lowercase) == 'ldap' }}


is changing but the but the show/hide on the following div's is not working

<div ng-show="{{ (authenticationType | lowercase) == 'itas' }}">ITAS</div>
<div ng-show="{{ (authenticationType | lowercase) == 'ldap' }}">LDAP</div>


The working version

Here i am doing simple comparison and it is working fine.

<div ng-show="{{ (authenticationType | lowercase) === 'itas' }}">ITAS</div>
<div ng-show="{{ (authenticationType | lowercase) === 'ldap' }}">LDAP</div>


I am able to proceed further but i just want to know why this is happening. If anyone can put some light on it that will be very nice.

2ps 2ps
Answer

Following up on Pankaj’s answer, ng-show takes an expression (https://docs.angularjs.org/api/ng/directive/ngShow):

The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute.

The keyword here is expression. i.e., ng-show takes a javascript expression to determine whether to show or hide the element. I would normally have written this like:

<div ng-show="authenticationType.toLowerCase() == 'itas'">ITAS</div>
<div ng-show="authenticationType.toLowerCase() == 'ldap'">LDAP</div>

n.b. here epxressions are different from {{ }} which is called markup. You can compare this to the ng-src directive which takes markup and not an expression: https://docs.angularjs.org/api/ng/directive/ngSrc.