example change buttons javascript twitter-bootstrap-3 javascript-events angular radio-button

javascript - change - radio button angular 4



Angular2: evento de cambio RadioButton no es vinculante (3)

Con Angular 2 RC2 ya no es necesario crear RadioButtonState:

Los botones de radio ahora pueden compartir la instancia de FormControl

<form #f="ngForm"> <input type="radio" name="food" [(ngModel)]="food" value="chicken"> <input type="radio" name="food" [(ngModel)]="food" value="fish"> </form>

Y:

class MyComp { food = ''fish''; }

Fuente: 5thingsangular - Edición # 8

Aquí, simplemente quiero vincular RadioButton con evento de cambio. No usando ninguna biblioteca.

Siguiente funciona bien.

<input type="radio" name="test" value="A" (change)="onPropertyChange(''test'')"> <input type="radio" name="test" value="B" (change)="onPropertyChange(''test'')">

Pero este no es:

<div class="btn-group col-lg-2" data-toggle="buttons" > <label *ngFor=" let app of applications; let i = index; " class="btn btn-default " [ngClass]="{''active'':( ticket.app == app)}"> <input type="radio" id="app{{i}}" name="app" value="{{i}}" checked="{{ ( ticket.app == app ) ? ''checked'' : ''''}}" (change)=" onPropertyChange(''app'')" > {{app}} </label> </div>

Mientras enlazo change event to label, me está dando un valor antiguo.

¿Alguien puede sugerir un enfoque correcto?

Gracias por adelantado...!!!


Usando ng2-bootstrap,

<div class="btn-group col-lg-2"> <label *ngFor="let app of applications" class="btn btn-default" [(ngModel)]="ticket.app" btnRadio="{{app}}">{{app}}</label> </div>

En archivo .ts,

  • Se agregó la import { ButtonRadioDirective } from ''ng2-bootstrap/components/buttons'';

  • En la anotación @Component , la pasó como directives: [ButtonRadioDirective] .

Funciona bien. Espero que funcione para ti.


Enlace de dos vías sin una biblioteca:

<div class="btn-group" data-toggle="buttons"> <label class="btn btn-default" [class.active]="yourVariable==item" (click)="yourVariable=item" *ngFor="let item of items"> <input type="radio" style="display: none;" name="radios" [(ngModel)]="yourVariable" [value]="item" [checked]="yourVariable==item" /> {{yourLabelText}} </label> </div>