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.
Related
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.
I want to create a a 3 radio button groups each having its own unique model using one ng-repeat. How can I achieve this?
<div class="radio" data-ng-repeat="item in selItem.items" >
<label class="control-label">
<input type="radio"
data-ng-value={{item.vm}}
data-ng-model="????"
name="{{selItem.Title}}"/>{{item.dm}}
</label>
</div>
First and foremost, why would you do that? Radio buttons are for a unique selection among a group of options, so having the same model for all radio buttons is the way to go.
However, for setting unique ng-models for each item iteration inside ng-repeat, you have to use object bracket notation, using $index or a property of each iteration itself to name the property of the object model.
<div ng-repeat="item in items">
<input type="text" ng-model="myModel[item.name]" >
</div>
check this fiddle to see it working
When I click on one checkbox, I am expecting only that checkbox to be marked. For some reason, however, when I click on one checkbox, they are all getting marked.
<label ng-repeat="group in groups" id="mast" class="list-group-item">
<input type="checkbox" checklist-model="selectedGroups.group" checklist-value="value" checklist-change="change()">
Group {{$index + 1}}
</label>
It's probably because of checklist-value="value". The value property is the same for each instance of the ng-repeat.
Try to replace by checklist-value="group.value".
--- HTML ---
<div class="btn-group menuSection">
<div class="menuGrid" ng-repeat="main in mains">
<button type="button" class="btn btn-default btn-sm btn-block"
ng-value="main" btn-radio="main" ng-model="$parent.selectedMain"
ng-click="setDish();"/>
{{main}}
</div>
<div class="menuGrid">
<input type="text" class="form-control input-sm"
ng-model="mainOtherText" ng-show="selectedMain == 'Other'"
placeholder="enter other here"/>
</div>
test : {{mainDish}}
</div>
--- JS ---
$scope.setDish = function(){
if ($scope.selectedMain == 'Other') {
$scope.mainDish = $scope.mainOtherText;
}
else {
$scope.mainDish = $scope.selectedMain;
}
};
I have a grid of radio buttons for selecting menu items, the last of which is 'Other'. When 'Other' is selected, a textbox shows up where the user inputs another item. My goal with the ng-click function is to update the variable mainDish with the value in the other textbox when 'Other' is selected.
This code works, however, the problem arises in that the variable mainDish only updates when the radio button is unselected.
Example - when a button is first clicked, it will have no affect on the variable mainDish, but then when another button is clicked mainDish is updated to the value of the first button clicked.
Any ideas on to why this is happening or ways I could fix it?
EDIT:
As per comment, I'll explain my code a bit more. I have a menu, a list of meals that the user picks from. This list is populated by the ng-repeat command grabbing from an array of meals and creating a radio button for each. The last item in the array is an item called 'Other'. When 'Other' is selected, a textbox appears so the user can input their own dish.
What I want: I want the variable mainDish to be assigned the value of the 'Other' textbox when the 'Other' radio box is selected. For all of the other items, the value of mainDish is just the value of the radio button, but this is not the case with 'Other'.
What I have: It works! But in an odd way. The variable mainDish is only updated when the radio button is deselected. Every time you click a new radio button, the variable mainDish gets assigned the value of the previous button. This is the problem I need help solving.
The problem is that ng-click fires before the ng-model code that updates the scope. If you change it to use ng-change, that will fix it. You also need to add ng-change to your text box to update the scope as the user types.
<div class="btn-group menuSection">
<div class="menuGrid" ng-repeat="main in mains">
<input type="radio" name="dishes"
class="btn btn-default btn-sm btn-block"
ng-value="main"
ng-model="$parent.selectedMain"
ng-change="setDish();"/>
{{main}}
</div>
<div class="menuGrid">
<input type="text" class="form-control input-sm"
ng-model="mainOtherText"
ng-show="selectedMain == 'Other'"
ng-change="setDish();"
placeholder="enter other here"/>
</div>
test : {{mainDish}}
</div>
Here is a working example: http://jsfiddle.net/bnzwx94b/2/
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'"