Amelina Amelina - 5 months ago 14
AngularJS Question

Why does ng-hide and ng-show not work?

Good day. I used a few ways to use ng-show and ng-hide but neither of them work. First div should hide and seccond appear when click a button. Help me please! This is last way I tried:

<div class="parentDiv .col-lg-">
<from class="centerMain">
<div ng-show="showF" class="center-block"> <!-- this div should hides -->
<div>
<label class="center-block">Введите PIN</label>
</div>
<div>
<input name="userName" placeholder="1234" class="center-block inputLine">
</div>
<div>
<button ng-click="showF = !showF" class="center-block buttonBig">Установить PIN</button> <!-- this button makes hiding -->
</div>
</div>
<div ng-show="!showF" class="center-block"> <!--this should appears -->
<div>
<label class="center-block">Подтвердите пин</label>
</div>
<div>
<input name="userName" placeholder="1234" class="center-block inputLine">
</div>
<div>
<button class="center-block buttonBig">Подтвердить</button>
</div>
</div>
</from>
</div>

Answer

Angular 2 has deprecated many unnecessary Angular 1 directives.

You could use [hidden]/[ngIf] like [hidden]="showF" OR *ngIf="showF"

Also all the event based directive are deprecated and you can directly call a event on DOM by wrapping its name in (eventName)

(click)="myFunction()" //instead of ng-click
(focus)="myFunction()" //instead of ng-focus
Comments