I'm having issues with getting the radiogroup field to work in a ng-repeat.
I have a set of form fields that are repeating:
<div ng-repeat="rpt in repeatables.REPEATGRP">
<input ng-required="false" name="text1" ng-readonly="false" type="text" ng-model="rpt.data.text1" id="text1" value="" />
<label for="radio1_1" class="radio-inline">
<input ng-required="true" name="radio1" type="radio" ng-model="rpt.data.radio1" id="radio1_1" value="1" /> Yes
</label>
<label for="radio1_2" class="radio-inline">
<input ng-required="true" name="radio1" type="radio" ng-model="rpt.data.radio1" id="radio1_2" value="0" /> No
</label><br/><br/>
</div>
The form data is initiated like this, with 2 sets of fields:
$scope.repeatables = {
REPEATGRP: [
{data:{text1: "test 1", radio1: 1}},
{data:{text1: "test 2", radio1: 0}}
]
};
But the 2 radio groups are behaving like they are linked to each other. It's hard to describe, but you can see it in action here: http://plnkr.co/edit/y4pCt0IsDTD8BzeA8SWZ?p=preview
One solution to don't alter the object, just add the $index variable that is part of the ng-repeat to the name of the input.
<input ng-required="true" name="radio1-{{$index}}" type="radio" ng-model="rpt.data.radio1" id="radio1_1" value="1" /> Yes
Based on your Plunker, here is working:
http://plnkr.co/edit/5KeyBrzLqzAIXrPxIoig?p=preview
just add a property name to your repeteables and set it in your radio buttons.
What it's happening is that as all of them have the same name, the browser groups them as if they are just one set of radio buttons :
(I changed also the id, so you don't have the same id repeated).
HTML:
<label for="radio1_1" class="radio-inline">
<input ng-required="true" name="{{rpt.name}}" type="radio" ng-model="rpt.data.radio1" id="{{rpt.name}}_1" value="1" /> Yes
</label>
<label for="radio1_2" class="radio-inline">
<input ng-required="true" name="{{rpt.name}}" type="radio" ng-model="rpt.data.radio1" id="{{rpt.name}}_2" value="0" /> No
</label>
SCOPE
$scope.repeatables = {
REPEATGRP: [
{data:{text1: "test 1", radio1: 1,name:'r1'}},
{data:{text1: "test 2", radio1: 0,name:'r2'}}
]
};
Related
How to make the radio button checked if the initial value is true?
Using the defaultChecked property, available for <input type="checkbox"> and <input type="radio"> - https://reactjs.org/docs/uncontrolled-components.html#default-values
<input type="radio" name="radio-group" value="1" defaultChecked />
<input type="radio" name="radio-group" value="2" />
<input type="radio" name="radio-group" value="3" />
Sometimes the issue can be fixed by removing the name attribute and instead using a conditional checked value:
<li>
<label>
<input
type="radio"
value="medium"
checked={this.state.size === "medium"}
onChange={this.handleChange}
/>
Medium
</label>
</li>
<li>
<label>
<input
type="radio"
value="large"
checked={this.state.size === "large"}
onChange={this.handleChange}
/>
Large
</label>
</li>
Source Here: https://magnusbenoni.com/radio-buttons-react/
Add the checked attribute to your radio button, e.g. checked={field.input.value}. [JS Bin]
Adding a defaultChecked should be the idea here and not the checked value.
Say I have a block of html like the following and I need to loop through an array of objects and display a label for each option.
I can do this easily using ng-repeat for the labels and the input individually, but in order for my style framework to update the checked input correctly, the input needs to be directly above the label in the document.
How can I do this without wrapping each group of input + label in another dom element? (This would destroy the style of the list as well)
need:
<input type="radio" name="rGroup" value="1" id="r1" />
<label class="radio radio-plan-lg" for="r1">
Billed every<br><span>1 month</span>
</label>
<input type="radio" name="rGroup" value="2" id="r2" />
<label class="radio radio-plan-lg" for="r2">
Billed every<br><span>3 months</span>
</label>
<input type="radio" name="rGroup" value="3" id="r3" />
<label class="radio radio-plan-lg" for="r3">
Billed every<br><span>6 months</span>
</label>
not:
<input type="radio" name="rGroup" value="1" id="r1" />
<input type="radio" name="rGroup" value="2" id="r2" />
<input type="radio" name="rGroup" value="3" id="r3" />
<label class="radio radio-plan-lg" for="r1">
Billed every<br><span>1 month</span>
</label>
<label class="radio radio-plan-lg" for="r2">
Billed every<br><span>3 months</span>
</label>
<label class="radio radio-plan-lg" for="r3">
Billed every<br><span>6 months</span>
</label>
Use ng-repeat-start:
<input ng-repeat-start="item in array" type="radio" name="rGroup" value="{{item}}" id="r{{item}}" />
<label ng-repeat-end class="radio radio-plan-lg" for="r{{item}}">
Billed every<br><span>{{item}} month</span>
</label>
See Documentation - Special repeat start and end points
I have a form that has a radio button group and the values are ng-value = true they are all their own entity on the model I have to work with and if a user selects one then changes their mind it still remain true. How can I make this false if deselected in an angular way?
I have a plnkr of the situation plunkr
<label class="radio-inline">
<input type="radio"
data-ng-value="true"
data-ng-model="vm.minorWorks.earthArTNS"
id="minorTns"
name="earthArrangements" />
<strong> TN-S</strong>
</label>
<label class="radio-inline">
<input type="radio"
data-ng-value="true"
data-ng-model="vm.minorWorks.earthArTNCS"
id="minorTncs"
name="earthArrangements" />
<strong>TN-C-S</strong>
</label>
<label class="radio-inline">
<input type="radio"
data-ng-value="true"
data-ng-model="vm.minorWorks.earthArTT"
id="minorTt"
name="earthArrangements" />
<strong>TT</strong>
</label>
<label class="radio-inline">
<input type="radio"
id="minorOther"
name="earthArrangements"
data-ng-value="true"
data-ng-model="vm.minorWorks.earthArOther"
data-ng-change="vm.minorWorks.earthArSpecify = vm.minorWorks.earthArOther ? vm.minorWorks.earthArSpecify : ''" />
<strong>OTHER</strong>
</label>
You could possibly add a function to the checkboxes, ng-click="checkState(model)"
and in .js
$scope.checkState = function(model){
if(model) { // if model = true
model = false; //set model to false
}
}
I am editing User Form. I send the data from controller to the edit view using $scope object for editing form. The data is look like this:
$scope.changeUser = [
{
id: 1,
username: 'Ramesh',
password: 'Ramesh1#23',
role: 'admin',
active: 'no'
}
];
<div class="form-group">
<label class="control-label col-md-3">Action</label>
<div class="col-md-4">
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changeUser.active" value="yes"/>
Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changerUser.active" value="no"/>
No
</label>
</div>
</div>
</div>
When edit form get {{changeUser.action}} than, I have to checked the radio button accordingly. As like when action=='no' the radio button with name no should be automatically checked as we did using checked value=no in the html. I have to write the ng-if conditions seeing the action value.
You are missing the index of changeUser array in your ng-model.
<div class="form-group">
<label class="control-label col-md-3">Action</label>
<div class="col-md-4">
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changeUser[0].active" value="yes" />
Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changeUser[0].active" value="no" />
No
</label>
</div>
</div>
</div>
See the Plnkr
Just started in Angular.js and have ran into a little hiccup that is taking a lot longer than it should to figure out. I have 3 sets of 4 radio buttons. I'm trying to access which radio buttons the user has selected in each set. The problem is so far I can only do it with one set. If there's more than one set, after the user selects one radio button, all the sets switch to that selected radio button. I'm pretty sure it has to do with my ng-model="$parent.selected" but I'm not sure how to fix it.
I couldn't get Angular working with JSFiddle for some reason so here's what I have:
HTML:
<form name="myForm" ng-controller="testController">
<div ng-repeat="question in questions | limitTo:3">
<div>{{question.Question}}</div>
<input type="radio" ng-model="$parent.selected" value="A" name="{{question.id}}" />{{question.A}}<br />
<input type="radio" ng-model="$parent.selected" value="B" name="{{question.id}}" />{{question.B}}<br />
<input type="radio" ng-model="$parent.selected" value="C" name="{{question.id}}" />{{question.C}}<br />
<input type="radio" ng-model="$parent.selected" value="D" name="{{question.id}}" />{{question.D}}<br />
Selected = {{selected}}
</div>
</form>
JS:
angular.module('nodeServerApp')
.controller('testController', function ($scope) {
$scope.questions =
[
{
"id": 0,
"Question": "Is C the right answer?",
"A": "This is choice A.",
"B": "This is choice B.",
"C": "This is choice C.",
"D": "This is choice D.",
"Answer": "C"
},
{
"id": 1,
"Question": "Is A the right answer?",
"A": "This is choice A.",
"B": "This is choice B.",
"C": "This is choice C.",
"D": "This is choice D.",
"Answer": "A"
},
{
"id": 2,
"Question": "Is D the right answer?",
"A": "This is choice A.",
"B": "This is choice B.",
"C": "This is choice C.",
"D": "This is choice D.",
"Answer": "D"
}
];
});
The ngModel should be selected, not $parent.selected (which would have been shared by all questions)...
<input type="radio" ng-model="selected" value="A" name="{{question.id}}" />{{question.A}}<br />
<input type="radio" ng-model="selected" value="B" name="{{question.id}}" />{{question.B}}<br />
<input type="radio" ng-model="selected" value="C" name="{{question.id}}" />{{question.C}}<br />
<input type="radio" ng-model="selected" value="D" name="{{question.id}}" />{{question.D}}<br />
Selected = {{selected}}
Also consider putting selected on question so everything is in one place...
<input type="radio" ng-model="question.selected" value="A" name="{{question.id}}" />{{question.A}}<br />
<input type="radio" ng-model="question.selected" value="B" name="{{question.id}}" />{{question.B}}<br />
<input type="radio" ng-model="question.selected" value="C" name="{{question.id}}" />{{question.C}}<br />
<input type="radio" ng-model="question.selected" value="D" name="{{question.id}}" />{{question.D}}<br />
Selected = {{question.selected}} {{question.selected === question.Answer ? "Correct" : "Incorrect"}}