Here, I want to simply bind RadioButton with change event. Not using any library.
Following works fine.
<input type="radio" name="test" value="A" (change)="onPropertyChange('test')">
<input type="radio" name="test" value="B" (change)="onPropertyChange('test')">
But this one is not :
<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>
While binding change event to label, it is giving me old value.
Can anyone suggest right approach?
With Angular 2 RC2 it’s no longer needed to create the RadioButtonState:
Radio Buttons can now share FormControl instance
<form #f="ngForm">
<input type="radio" name="food" [(ngModel)]="food" value="chicken">
<input type="radio" name="food" [(ngModel)]="food" value="fish">
</form>
And:
class MyComp {
food = 'fish';
}
Source: 5thingsangular - Issue #8
Using 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>
In .ts file,
Added import { ButtonRadioDirective } from 'ng2-bootstrap/components/buttons';
In #Component annotation, passed it as directives: [ButtonRadioDirective].
It works fine. Hope it will work for you.
Two way binding without a library:
<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>
Related
I'm trying to toggle between 2 divs and I can't even get through the first challenge... to catch the radiobutton click event with jQuery selector.
$("input[name='radio_btn_options']").on("click", function(){
debugger;
alert("1234");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group btn-group-toggle" style="margin:15px" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="radio_btn_options" id="diagramRB" autocomplete="off" checked> Diagram
</label>
<label class="btn btn-secondary">
<input type="radio" name="radio_btn_options" id="listRB" autocomplete="off"> List View
</label>
</div>
I don't get no error message no nothing. Nothing just happens have i done something wrong??
Hi i am using reactive forms to bind the values to the radio buttons. Now the values have got binded, but if i change value from yes to no it is not getting updated in the formcontrol neither in the array of objects i have used. Can anyone help me how can this be solved, here i used reactive forms mainly because if there is any change in the toggle buttons then the application can be saved or i need to show message saying no changes to save, so i have used reactive forms and i am struck with this. Can anyone help me to solve this.
TS:
this.musicForm = this.fb.group({
musicPreferences: this.fb.array(this.musicPreferences.map(x => this.fb.control(x.boolValue))),
});
this.musicForm.valueChanges.subscribe(data => {
this.formEdit = true;
console.log('agentSettingsInfoForm', this.formEdit)
})
DEMO
HTML:
<div class="col pt-lg-4">
<label for="" class="font-weight-bold">Agency Policy</label>
<div class="row" formArrayName="musicPreferences">
<div class="col columns-2">
<div class="d-flex mb-3 w-100 justify-content-between align-items-center" *ngFor="let toggleValue of musicPreferences;let i = index">
<label for="{{toggleValue.id}}">{{toggleValue.label}}</label>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-primary" [class.active]="!toggleValue.boolValue" (click)="onItemChange(false,toggleValue.id)">
<input type="radio" name="options" id="option1" id="{{toggleValue.id}}" [attr.checked]="toggleValue.boolValue" [disabled]="isReadOnly" > No
</label>
<label class="btn btn-outline-primary " [class.active]="toggleValue.boolValue" (click)="onItemChange(true,toggleValue.id)">
<input type="radio" name="options" id="option2" id="{{toggleValue.id}}" [attr.checked]="toggleValue.boolValue" [disabled]="isReadOnly" > Yes
</label>
</div>
</div>
</div>
</div>
</div>
or using this demo, is it possible to make checkbox like Yes and No button, using css can this demo be made like above one.
DEMO
I have no idea why this is not working. I check if the index I have reached is 0 if it is, set the input box value to checked. Otherwise, don't. It seems like a VERY simple thing to do, but I cannot fathom why this is broken?
VueJS:
<div class="large-6 columns">
<h5 class="subheader">Standard templates</h5>
<div>
<form>
<template v-for="(template, index) in systemTemplates">
<input type="radio" v-bind:id="template.reportId" v-bind:value="template.reportId" v-model="selectedTemplate" v-if="index == 0" checked />
<input type="radio" v-bind:id="template.reportId" v-bind:value="template.reportId" v-model="selectedTemplate" v-else />
<label v-bind:for="template.reportId">{{template.title | sanitizeStr}}</label>
</template>
</form>
</div>
</div>
Image of visual result:
rendered DOM elements:
<div class="large-6 columns">
<h5 class="subheader">
Standard skabeloner
</h5>
<div>
<form>
<input type="radio" id="59a92aafae7a711b3890174e" checked="checked" value="59a92aafae7a711b3890174e">
<label for="59a92aafae7a711b3890174e">Default PDF report</label>
<input type="radio" id="59a92aafae7a711b38901753" value="59a92aafae7a711b38901753">
<label for="59a92aafae7a711b38901753">Default Repeater template: 2 C...</label>
<input type="radio" id="59a92aafae7a711b38901758" value="59a92aafae7a711b38901758">
<label for="59a92aafae7a711b38901758">Default PDF with Map</label>
<input type="radio" id="59a92aafae7a711b38901759" value="59a92aafae7a711b38901759">
<label for="59a92aafae7a711b38901759">Default Repeater template: 2 C...</label>
<input type="radio" id="59a92aafae7a711b3890175f" value="59a92aafae7a711b3890175f">
<label for="59a92aafae7a711b3890175f">Niras standard PDF</label>
<input type="radio" id="59a92aafae7a711b38901760" value="59a92aafae7a711b38901760">
<label for="59a92aafae7a711b38901760">Niras standard PDF m. forside</label>
</form>
</div>
</div>
When using v-model, you should not use the checked attribute, but set the default value of the v-model to the desired checked value.
Use only one input in your loop:
<template v-for="(template, index) in systemTemplates">
<input type="radio" v-bind:id="template.reportId" v-bind:value="template.reportId" v-model="selectedTemplate" />
<label v-bind:for="template.reportId">{{template.title | sanitizeStr}}</label>
</template>
And set selectedTemplate default value to systemTemplates[0].reportId:
data() {
return {
selectedTemplate: this.systemTemplates[0].reportId
}
}
I'm doing a custom checkbox variant, which uses hidden input elements. My problem is that normal checkboxes only post their value to the server, if the checkbox is checked. These custom checkboxes post values no matter what, so I have no way of knowing if the checkbox is actually checked or not, when reading the data server side.
Here is the fiddle I have used as an example
HTML:
<div class="row" id="checkboxes">
<div class="col-xs-12">
<div class="form-group">
<div class="col-md-6">
<input name="checkbox1" type="hidden" value="0"/>
<input name="checkbox2" type="hidden" value="0"/>
<input name="checkbox3" type="hidden" value="0"/>
<div class="btn-group" data-toggle="buttons">
<button type="button" class="btn btn-default" data-checkbox-name="checkbox1">Yes</button>
<button type="button" class="btn btn-default" data-checkbox-name="checkbox2">Maybe</button>
<button type="button" class="btn btn-default" data-checkbox-name="checkbox3">No</button>
</div>
</div>
</div>
</div>
</div>
JavaScript:
$('.btn[data-checkbox-name]').click(function() {
$('input[name="'+$(this).data('checkboxName')+'"]').val(
$(this).hasClass('active') ? 0 : 1
);
});
Now, in this matter, it actually uses the value of the checkbox to signal if it is checked or not. I however, need an arbitrary number of checkboxes, and I need all of the checkboxes to be able to send a specific value, instead of a name and a 0/1. Yes it is possible for me to programmatically give the checkboxes names where my needed value is a part of the name, and then substring-interpret it server side, but I'd rather return them seperately, for overview and simplicity.
So here is my version of the code:
HTML:
<div class="row" id="checkboxes">
<div class="col-xs-12">
<div class="form-group">
<div class="col-md-6">
<input name="checkbox1" type="hidden" value="A" data-value="0"/>
<input name="checkbox2" type="hidden" value="B" data-value="0"/>
<input name="checkbox3" type="hidden" value="C" data-value="0"/>
<div class="btn-group" data-toggle="buttons">
<button type="button" class="btn btn-default" data-checkbox-name="checkbox1">Yes</button>
<button type="button" class="btn btn-default" data-checkbox-name="checkbox2">Maybe</button>
<button type="button" class="btn btn-default" data-checkbox-name="checkbox3">No</button>
</div>
</div>
</div>
</div>
</div>
JavaScript:
$('.btn[data-checkbox-name]').click(function() {
$('input[name="'+$(this).data('checkboxName')+'"]').data("value",
$(this).hasClass('active') ? 0 : 1
);
});
I've pretty much just changed so that it uses data-value instead of value, to keep track of it's 0/1 state, which leaves value unchanged. But now I have no way of knowing if it is checked or not. Is there a way I can filter the results client side, before sending them, using the data-value as a filter value?
I'm already using JQuery, if that helps.
Let's assume we don't use AJAX, no need to overcomplicate things. As Paul stated, the general approach is to use standard checkboxes.
<div class="row" id="checkboxes">
<div class="col-xs-12">
<div class="form-group">
<div class="col-md-6">
<input name="checkbox1" type="checkbox" value="A" class="hide"/>
<input name="checkbox2" type="checkbox" value="B" class="hide"/>
<input name="checkbox3" type="checkbox" value="C" class="hide"/>
<div class="btn-group" data-toggle="buttons">
<button type="button" class="btn btn-default" data-checkbox-name="checkbox1">Yes</button>
<button type="button" class="btn btn-default" data-checkbox-name="checkbox2">Maybe</button>
<button type="button" class="btn btn-default" data-checkbox-name="checkbox3">No</button>
</div>
</div>
</div>
</div>
</div>
And
$('.btn[data-checkbox-name]').click(function() {
$('input[name="'+$(this).data('checkboxName')+'"]').prop('checked',
!$(this).hasClass('active')
);
});
When the form is submitted the default behavior of the checkboxes is preserved: only the checked checkboxes will be sent.
What I am trying to accomplish:
I am trying to make a form where when a user selects yes a div slides down, and when the user selects no the div slides up (thus making what is in that div invisible). and I want this to have a nice display (to look almost like a button in a group that can toggle and only one is able to toggle at a time such as a radio button) it should look more or less like this:
http://getbootstrap.com/components/#btn-groups
What my problem is:
When I toggle this button it will not fire a function.
Where it gets weird
I notice that when I don't set the data-toggle="buttons" I get radio buttons that have the little circle and fire the function, but when I set data-toggle="buttons" it will not fire the function.
Here is my form:
<form id="questionnaire">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input class="btn btn-default" data-role="none" type="radio" value="yes" name="vomit" />yes
</label>
<label class="btn btn-default">
<input class="btn btn-default" data-role="none" type="radio" value="no" name="vomit" />no
</label>
</div>
<div class="expand">
<h4>How many times?</h4>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="number" class="form-control">
</div>
</div>
and the function I am trying to fire:
$('#questionnaire input[name=vomit]').on('change', function () {
var $p = $('.expand');
if ($('input[name=vomit]:checked').val() == "yes") {
//alert("hello");
$p.slideDown();
}
else {
//alert("nope");
$p.slideUp();
}
});
Can anyone please help me get the radio button to look like the bootstrap (and once selected they stay the color) one but that functions?
Thanks
I ended up using this switch here :
http://proto.io/freebies/onoff/
here is the html:
<h4>Did you Vomit?</h4>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="vomit" />
<label class="onoffswitch-label" for="vomit">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="expand">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="number" class="form-control">
</div>
</div>
here is the jquery
$("#vomit").change(function () {
var $p = $('.expand');
if ($(this).is(':checked')) {//this is true if the switch is on
$(this).val("Yes");
$p.slideDown();
}
else {
$(this).val("No");
$("#numVomit").val(0);
$p.slideUp();
}
});
It seems like there was truly a conflict with jquery, bootstrap and jquery-ui. I will have to end up doing some code cleanup to see exactly where it is conflicting.