Question

我正在尝试使用ng-model和ng-hide显示/隐藏角度为7的div，但无法正常工作。

button用于显示/隐藏-使用ng-model来设置表达式

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

div显示/隐藏，使用ng-hide隐藏div

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

我尝试过ng-model和ng-hide仍然无法正常工作。请提供解决方案

Answer 1

您可以使用<div *ngIf="show"

并在.ts文件中使用一个布尔值，如果按钮处于触发状态，则可以更改该值

Answer 2

如果您使用的是change，则可以使用type='checkbox'事件处理程序

<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 Demo

Answer 3

尝试以下解决方案：

解决方案1：

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

解决方案2：

<div [hidden]="!show" class="row container-fluid"  id="divshow" >
            Div Content
        </div>

Answer 4

在您的HTML中

<button (click)="toggleShow()" type="checkbox" >show/hide</button>

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

</div>

在您的组件类中添加以下内容：

isShown: boolean = false ; // hidden by default


toggleShow() {

this.isShown = ! this.isShown;

}

Answer 5

您应该在ts文件中使用一个标志，默认情况下，标志为false

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

Answer 6

最好的方法：

<input type="checkbox" (change)="show = !show" ng-model="show"/>
show/hide

<div class="row container-fluid" [hidden]="!show" id="divshow" >
Div Content
</div>

Answer 7

这是一种隐藏/删除项目的巧妙方法，如果有项目列表，则特别方便。

注意它如何利用 Angular's template variables (#ListItem)。

<ng-container *ngFor="let item of list">
  <div #ListItem>
    <button (click)="close(ListItem)">
  </div>
</ng-container>

  close(e: HTMLElement) {
    e.remove();
  }

显示以角度7隐藏div

7 个答案: