manjeet lama manjeet lama - 11 months ago 48
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 Source

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.