使用带有按钮的 ng-switch答案

【问题标题】：Using ng-switch with buttons使用带有按钮的 ng-switch
【发布时间】：2017-08-18 07:30:07
【问题描述】：

我正在尝试将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>

【问题讨论】：

您能提供我们您的类型（名称）定义吗？
我试图做的是在函数type 中传递按钮的name 属性，以便它可以在ng-switch 中使用，但它不起作用
所以应该是 ng-switch="name_variable"

标签： html angularjs ng-switch

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

这不起作用。它的输出与我发布的代码相同。
这很奇怪，它对我有用：plnkr.co/edit/tzUgm6hSdnMVeW8x29Pr?p=preview

【解决方案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 {
    }
  }
}

【讨论】：