CODEWITHSUNDEEP
angularjscordovaionic-framework
Ortiz
Ortiz

Reputation: 294

Angular ng-show="false" is not working

First of all, I have searched already for this topic. There are lots of questions of answers for this, but none address my issue. So please, be kind and don't mark this question as duplicate.

I am trying to display and hide an ion-item on my hybrid application. The tests I am doing are done solely on the html side.

<ion-header>
    <ion-navbar color="secondary">
        <ion-title>
            CEPs!
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content margin>
    <ion-item ng-show="false">{{ item.cep + "\n" + item.logradouro + "\n" + item.complemento + "\n" + item.bairro + "\n" + item.localidade + "\n" +
        item.uf}}
    </ion-item>

    <form margin-top (ngSubmit)="test()">
        <ion-item>
            <ion-input type="number" max="99999999" [(ngModel)]="form.cep" name="form"></ion-input>
        </ion-item>
        <button ion-button type="submit" center>Pesquisar CEP</button>
    </form>
</ion-content>

I set ion-item ng-show as "false", which on editors like the one at W3Schools works correctly. But here it is not working at all. What should I do?

My versions: Ionic: 3.5.0 Cordova: 7.0.1 Angular: 1.6.5

Upvotes: 2

Views: 4146

Answers (3)

Jesse
Jesse

Reputation: 459

I realize this is an old post, but the platform I'm working on is still primarily running AngularJS V1 and I'm adding this just in case someone else stumbles across it.

I had a variable assignment based on a conditional check and although the variable was evaluating to false, ngShow continued to display the element. So, since the ngShow/ngHide directives are evaluated as truthy/falsy, switching to strict interpretation fixed my issue :D.

Ex:

Not Working: <ng-show="varIsFalse"> Working: <ng-show="varIsFalse === true">

Upvotes: 0

Sai
Sai

Reputation: 2668

You can use *ngIf.

<ion-item *ngIf="false">

Or you can use hidden as @abd Elrahman Telb answered.

<ion-item [hidden]="false">

The difference is *ngIf completely removes content from DOM if the condition meets false. Where as [hidden] (you observe the [] which means one way binding of angular to the property) means hidden attribute will be added if condition meets true which is html property.

Hope it helps :)

Upvotes: 1

abdoutelb
abdoutelb

Reputation: 1053

you can use [hidden] intead of ng-show

<ion-item [hidden]="false">

check hidden

Upvotes: 3

Related Questions