Question

我正在尝试将ng-switch与2个按钮一起使用，以便根据点击的按钮显示HTML元素。我没见过像这样的例子

到目前为止，这是我的代码：

<button name="withdraw" ng-click="type(name)">Withdraw</button>
<button name="enter" ng-click="type(name)">Enter Amount to Withdraw</button>
<hr>

<div ng-switch="type(name)">
        <div ng-switch-when="withdraw">
            //code
        </div>
        <div ng-switch-when="enter">
            //code
        </div>
</div>

Answer 1

如果您使用相关按钮，请使用单选按钮。

  <input type="radio" ng-model="myVar" value="withdraw">withdraw
  <input type="radio" ng-model="myVar" value="enter"> enter

在条件

中使用模型值

 <div ng-switch="myVar">
      <div ng-switch-when="withdraw">
         <h1>withdraw</h1>
      </div>
      <div ng-switch-when="enter">
         <h1>enter</h1>
      </div>

</div>

Answer 2

试试这个：

<button name="withdraw" ng-click="name = 'withdraw'">Withdraw</button>
<button name="enter" ng-click="name = 'enter'">Enter Amount to Withdraw</button>
<hr>

<div ng-switch="name">
        <div ng-switch-when="withdraw">
            code 1
        </div>
        <div ng-switch-when="enter">
            code 2
        </div>
</div>

Answer 3

这是针对角度类型的脚本：

1.app.cpmponent.html

<div class="wapper">
  <button (click)="toggle()"></button>
  <div class="up" *ngIf="show">
    <label>
      <input type="file" (change)="handleFileImage($event.target.files)" accept=".jpg,.svg,.png,.jpeg " />
      <img width="100%" height="100%" *ngIf="imageUrl" [src]="imageUrl" class="image" />

    </label>
  </div>

  <div class="up" *ngIf="!(show)">
    <label>
      <input type="file" (change)="handleFileVideo($event.target.files)" accept=".mp4" />

      <video autoplay width="100%" height="100%" *ngIf="videoUrl" class="image">
        <source [src]="videoUrl" autoplay>
      </video>
    </label>
  </div>
</div>

2.app.component.ts

export class AppComponent{
  fileToUpload: any;
  imageUrl: any;
  videoUrl: any;
  show = true;

  handleFileImage(file: FileList) {
    this.fileToUpload = file.item(0);

    //Show image preview
    let reader = new FileReader();
    reader.onload = (event: any) => {
      this.imageUrl = event.target.result;
    };
    reader.readAsDataURL(this.fileToUpload);
  }
  handleFileVideo(file: FileList) {
    this.fileToUpload = file.item(0);

    let reader = new FileReader();
    reader.onload = (event: any) => {
      this.videoUrl = event.target.result;
    };
    reader.readAsDataURL(this.fileToUpload);
  }


  toggle() {
    this.show = !this.show;

    if (this.show) {

    } else {
    }
  }
}

使用ng-switch和按钮

3 个答案: