Using ng-switch with buttons

Question

I'm trying to use ng-switch with 2 buttons in order to show HTML elements depending on which button is clicked. I have not seen any example like that

here's my code so far:

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

what I was trying to do was pass the `name` attribute of the button in the function `type` so that it could be used in the `ng-switch`, but it's not working — Jolan, Aug 18 '17 at 07:37

score 2 · Answer 1 · answered Aug 18 '17 at 08:19

If you are using dependent buttons use radio button .

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

Use the model value to with in the conditions

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

</div>

score 1 · Accepted Answer · answered Aug 18 '17 at 07:44

1

Just try this one:

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

answered Aug 18 '17 at 07:44

Dan M. CISSOKHO

1,070
1
12
27

this doesn't work. it's output is the same as the code I posted. – Jolan Aug 18 '17 at 08:10
It's strange, it's works for me : http://plnkr.co/edit/tzUgm6hSdnMVeW8x29Pr?p=preview – Dan M. CISSOKHO Aug 18 '17 at 08:16

score 0 · Answer 3 · answered Jul 12 '20 at 12:47

This is for angular type script:

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 {
    }
  }
}

Using ng-switch with buttons

3 Answers3