I create a list of radio button selections, but the problem is that when clicked, they both remain selected, thus not working as a radio button group at all.
I have the same ng-model (a string; 'model') and ng-change for all of them, but the id is different.
<div class="radio-button"
ng-show="vm.forAdmins"
ng-repeat="role in vm.adminRoleDefinitions">
<input id="{{role.name}}" type="radio"
ng-model="role.model"
ng-change="vm.stateChanged(role.name, role.active)" >
{{role.name}}
</div>
Been wrestling with this for a while now, can't see what I've missed.
Radio button will work as a group if you assign name property to those radio buttons. I was also facing this issue then I realized my mistake.
<div class="radio-button" ng-show="vm.forAdmins" ng-repeat="role in vm.adminRoleDefinitions">
<input id="{{role.name}}" type="radio"
ng-model="role.model"
ng-change="vm.stateChanged(role.name, role.active)"
name="roles" >
{{role.name}}
</div>
Try assigning a name attribute to your radio button. name groups the radio button. For example :
<input type="radio" name="someRadio" id="radioOne" />
<input type="radio" name="someRadio" id="radioTwo" />
Now only one is selected at a time.
Related
Should be simple - what am I doing incorrectly?
In my controller:
$scope.eventShow = {tab: 'stations'};
and, in a view:
Show:
<span>
<label>Stations</label>
<input type="radio" ng-model="eventShow.tab" value="stations" class="check_box" />
</span>
<span>
<label>Visitors</label>
<input type="radio" ng-model="eventShow.tab" value="visitors" class="check_box" />
</span>
I want the radio buttons to toggle, when one is clicked, and $scope.eventShow.tab to be updated appropriately
Your code is working correctly for me. what version of angular are you using? I am using this:
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js
or is it possible you do not have ng-controller in the html?
I've been struggling with this for a few hours and don't know why I'm getting this behaviour.
I have a radio input that is being repeated using ng-repeat, when I click on one radio button and the click on another radio button they both stay selected.. I'm not using ng-repeat on the input rather a div wrapping the input
<div class="group-items">
<div ng-repeat="item in ngDialogData.menu_modifier_groups[0].menu_modifier_items" class="modifier-item">
<label for="<%item.menu_modifier_group.id + '_' + item.id%>" ng-click="modifierClicked(item)">
<input id="<%item.menu_modifier_group.id + '_' + item.id%>"
class="radio-branded"
type="radio"
name="<%item.name%>"
ng-model="item.selected"
title="<%item.name%>"
value="<%item.id%>"
ng-class="{'not-available': !item.available, 'show-ie': false}">
<span class="checkbox"></span>
<span class="item-name">
<span ng-bind="item.name"></span>
<span ng-bind="priceDelta(modifier, item)"></span>
</span>
</label>
</div>
</div>
Why are two radio buttons staying selected.. Any guidance appreciated
Radio buttons that are part of the same group should have the same name. You are assigning a name that comes from item.name. If that's different, the radio buttons will act as separate radio button groups.
How do I get the proper radio button to be checked according to the value of fc.confidence when the template is first loaded?
The code below selects neither radio even though the value of fc.confidence is None
div.container-fixture(ng-repeat="fc in fixtureConfidences")
div.item-confidence
div {{ fc.gsm_id }}
div
label None
input(type="radio" name="confidence_radiogroup" value="None" ng-model="fc.confidence")
label Low
input(type="radio" name="confidence_radiogroup" value="Low" ng-model="fc.confidence")
Part of your problem is that you are sharing the radio group name across all the items in your repeat. When you omit the name, AngularJS will group them by scope and give it a name dynamically.
Here is how it would look (in HTML):
<div class="container-fixture" ng-repeat="fc in fixtureConfidences">
<div class="item-confidence">
<div>
{{ fc.gsm_id }}
</div>
<div>
<label>None
<input type="radio" value="None" ng-model="fc.confidence" />
</label>
<label>Low
<input type="radio" value="Low" ng-model="fc.confidence" />
</label>
</div>
</div>
</div>
<pre>{{fixtureConfidences | json}}</pre>
Here is a working plunker: http://plnkr.co/edit/nc2Xx2hvCE7iOnlC4i5R
I am generating some radio buttons using ng-repeat, here is the code
<input type="radio" ng-repeat="i in items" name="myRadio{{$index}}" value="{{i.val}}" />
its generating 2 radio buttons, I want to show a section only if the radio button of value "sftp" is selected, how can I do that?
<div ng-show="????">
this section is visible when radio button having value sftp is selected
</div>
Give a model to both radios:
<input ng-model="myRadio" type="radio" ng-repeat="i in items" name="myRadio{{$index}}" value="{{i.val}}" />
And just do:
ng-show="myRadio == 'sftp'"
I created this simple example: http://jsfiddle.net/5Bh59/.
If you switch between AngularJS 1.2.1 and 1.1.1, you'll see the radio buttons don't work properly in either version. If you watch the radio button's $dirty field, 1) for version 1.1.1, it will only be set when the first button is clicked, and 2) for version 1.2.1, it will only be set when the last button is clicked.
I read this answer: AngularJS Radio group not setting $dirty on field but I don't really understand the answer. Not only that but the fiddler example demonstrates the same behavior.
So, is this a bug in AngularJS and how can I work around it?
You either need to give each radio button input a different name, or you need to wrap each radio button in an ng-form (each of which have a different name). If you use two inputs with the same name in the same form, only the last one will be bound to the property on the FormController. If you use different names, then each input will have its own property on the FormController.
Example with different names for each radio button:
http://jsfiddle.net/BEU3V/
<form name="form" novalidate>
<input type="radio"
name="myRadio1"
ng-model="myRadio"
ng-click=""
value="Rejected"
required>Rejected<br />
<input type="radio"
name="myRadio2"
ng-model="myRadio"
ng-click=""
value="Approved"
required>Approved<br />
Form $dirty: {{form.$dirty}}<br />
Field1 $dirty: {{form.myRadio1.$dirty}}<br />
Field1 $dirty: {{form.myRadio2.$dirty}}<br />
Value: {{myRadio}}
</form>
Example wrapping with ng-form:
http://jsfiddle.net/39Rrm/1/
<form name="form" novalidate>
<ng-form name="form1">
<input type="radio"
name="myRadio"
ng-model="myRadio"
ng-click=""
value="Rejected"
required>Rejected<br />
</ng-form>
<ng-form name="form2">
<input type="radio"
name="myRadio"
ng-model="myRadio"
ng-click=""
value="Approved"
required>Approved<br />
</ng-form>
Form $dirty: {{form.$dirty}}<br />
Field1 $dirty: {{form.form1.myRadio.$dirty}}<br />
Field2 $dirty: {{form.form2.myRadio.$dirty}}<br />
Value: {{myRadio}}
</form>
If you'd like a single check for the radio group, you can wrap all the radio buttons in their own ng-form and call it something like name="radioGroup".
http://jsfiddle.net/6VVBL/
<form name="form" novalidate>
<ng-form name="radioGroup">
<input type="radio"
name="myRadio1"
ng-model="myRadio"
ng-click=""
value="Rejected"
required>Rejected<br />
<input type="radio"
name="myRadio2"
ng-model="myRadio"
ng-click=""
value="Approved"
required>Approved<br />
</ng-form>
Form $dirty: {{form.$dirty}}<br />
Group $valid: {{form.radioGroup.$valid}}<br />
Group $dirty: {{form.radioGroup.$dirty}}<br />
Value: {{myRadio}}
</form>
This answer is related but perhaps not exactly applicable, but after finding and reading this item I felt it valuable to provide, and I don't have enough points to just comment on an answer (which I thought would have been a more appropriate way to respond).
My issue was that I wanted to show a required error (using ng-messages) but when you tabbed through / past the radio button group $touched didn't turn true unless you shift-tabbed back from the next UI element back to the last radio button of the group. (When my form renders the radio buttons are not set - I'm wanting the user to make a selection and not rely on the user accepting a default.)
Here's my code:
<div class="form-group" ng-class="{'has-error': pet.genderId.$invalid && pet.genderId.$touched}">
<label class="control-label">
What is your pet's gender?
<span ng-messages="pet.genderId.$error" ng-show="pet.genderId.$invalid && pet.genderId.$touched">
<span ng-message="required">(required)</span>
</span>
</label>
<div>
<label class="radio-inline"><input type="radio" ng-model="genderId" name="genderId" value="1" required ng-blur="pet.genderId.$setTouched();" />Male</label>
<label class="radio-inline"><input type="radio" ng-model="genderId" name="genderId" value="2" required ng-blur="pet.genderId.$setTouched();" />Female</label>
<label class="radio-inline"><input type="radio" ng-model="genderId" name="genderId" value="3" required ng-blur="pet.genderId.$setTouched();" />Not sure</label>
</div>
</div>
The 'magic' was adding the ng-blur attribute to set 'touched' myself even if only the first radio button was tabbed past.
You may be able to employ a similar tactic for $dirty by calling $setDirty() in the ng-changed attribute.