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
– Jolan, Commented Aug 18, 2017 at 7:37

Abdullah Al Noman · Accepted Answer · 2017-08-18 08:19:40Z

2

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>

answered Aug 18, 2017 at 8:19

Abdullah Al Noman

2,8784 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dan M. CISSOKHO · Accepted Answer · 2017-08-18 07:44:27Z

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, 2017 at 7:44

Dan M. CISSOKHO

1,0851 gold badge14 silver badges28 bronze badges

2 Comments

Jolan Over a year ago

this doesn't work. it's output is the same as the code I posted.

Dan M. CISSOKHO Over a year ago

It's strange, it's works for me : plnkr.co/edit/tzUgm6hSdnMVeW8x29Pr?p=preview

Fahimeh Ahmadi · Accepted Answer · 2020-07-12 12:47:38Z

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

Collectives™ on Stack Overflow

Using ng-switch with buttons

3 Answers 3

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Related