web-dev-qa-db-ja.com

表示divの非表示angular 7

angular 7 ng-modelおよびng-hideを使用してdivを表示/非表示にしようとしていますが、機能しません。

button to show/Hide- used ng-model式を設定します

    <button type="checkbox" ng-model="show" >show/hide</button>

div表示/非表示、使用済みng-hidedivを非表示にします

<div class="row container-fluid" ng-hide="show" id="divshow" >
  Div Content
</div>    
</body>
</html>

私が試してみました ng-modelおよびng-hideまだ機能していません。解決策を提供してください

5
Ayush Jain AJ

type='checkbox'を使用している場合は、changeイベントハンドラーを使用できます。

<input type="checkbox" (change)="show = !show" ng-model="show" />
Div to Show/Hide

<div class="row container-fluid" *ngIf="show" id="divshow" >
Div Content
</div>

Stackblitzデモ

1
Abhishek Kumar

tsファイルではフラグを使用する必要があります。デフォルトでは、フラグはfalseです。

<button type="checkbox" (click)="flag= !flag">{{falg=== true ? 'Show' : 'Hide'}}</button>
0
X3Vikas