I have an ng-repeat with a bunch of radio buttons inside:
<div class="panel panel-default" ng-repeat="offer in vm.offerList">
...
<td ng-show="offer.edit">
<div class="row">
<input type="radio" name="before" ng-model="offer.before" value="false">
<input type="radio" name="before" ng-model="offer.before" value="true">
</div>
</td>
...
</div>
The model offer.before has the correct value, however, when the row is shown, the radio button doesn't appear checked. Why is this happening? I need the radio button to show the selected value.
This is a fiddle example of my problem: http://jsfiddle.net/danielrvt/dpoLdgjq/
Because anything inside attribute value gets toString() like value true will be considered as 'true' & it will looks for 'true'(string) instead of true(boolean).
Better use ng-value instead of value attribute. It will treat true value as in true of type boolean only.
Additionally in your case you have to add name attribute to be unique for each radio button group each offer element radio will be considered as unique form element.
Markup
<div class="row">
{{offer.before}}
<input type="radio" name="before{{$index}}" ng-model="offer.before" ng-value="false">
<input type="radio" name="before{{$index}}" ng-model="offer.before" ng-value="true">
</div>
Forked Fiddle
Related
I am dynamically populating the radio button using a json. And using ng-repeat to display it. My issue is that the last radio button gets picked by default which I don't want. I don't see any reason for it to be selected.
<div ng-repeat="bankAccount in availableBankAccounts">
<div class="account-list grey-bottom-border">
<div class="col-sm-6">
<label class="radio col-xs-12 spacer-top-sm option-label">
<input type="radio" name="radio2" ng-model="updateDD.bankAccountId" ng-value="updateDD.bankAccountId" ng-click="selectedReason(bankAccount)" required="" class="ng-untouched ng-dirty ng-valid ng-valid-required">
<span class="control-indicator control-indicator-lg hand-cursor"></span>
<span>Account ending in *{{bankAccount.depositAccountNumber|last4Digits}}</span>
</label>
<!-- <p>Account ending in *7890</p> -->
</div>
</div>
</div>
Js file:
$scope.updateDD.bankAccountId=$scope.radio7;
if($scope.availableBankAccounts.length>1)
{
$scope.createJson();
}
Any help indicating what is making last radio button select by default will be helpful.
Try $scope.availableBankAccounts.length>=1
Should work
You are giving the same value to ng-model, where you want to see the selected value and ng-value, which you want to use for value.
Instead of
ng-model="updateDD.bankAccountId" ng-value="updateDD.bankAccountId"
you should do something like
ng-model="updateDD.bankAccountId" ng-value="bankAccount.Id"
I currently have this UI:
the problem is that when I click one radio button, any preselected button will become unselected. So that's telling me that there aren't different input groups - all of the <input> tags are probably in one big group.
This is probably a pretty vanilla problem, but I am simply not an HTML or Angular expert.
Here is the code for this, there is an outer loop and an inner loop using ng-repeat:
<form name="myQuestionsForm" ng-submit="submit()"> // outer form
<div class="panel panel-default" ng-repeat="q in questions | orderBy:[]">
<h1>{{q.prompt.value}}</h1>
<div class="panel-body">
<form id="aform"> // inner form
<div ng-repeat="c in q.children | orderBy:[]">
<div ng-if="c.kind == 'text'">
<label>
{{c.value}}
<textarea name="response" class="form-control" ng-value="c.value" ng-model="q.newResponse.value"></textarea>
</label>
</div>
<div ng-if="c.kind == 'checkbox'">
<label>
{{c.value}}
<input type="checkbox" name="response" class="form-control" ng-value="c.value" ng-model="q.newResponse.value">
</label>
</div>
<div ng-if="c.kind == 'radio'">
<label>
{{c.value}}
<input type="radio" name="response" class="form-control" ng-value="c.value" ng-model="q.newResponse.value">
</label>
</div>
</div>
</form>
</div>
</div>
<div style="text-align: center;">
<button type="submit" class="btn btn--success btn">
<h5>Submit</h5>
</button>
</div>
</form>
Perhaps the reason this is happening is because I have nested forms? Maybe I need to get rid of the outer form?
Group radio buttons with the name attribute.
<input> type attribute
The type of control to display. The default type is text, if this attribute is not specified. Possible values are:
radio: A radio button. You must use the value attribute to define the value submitted by this item. Use the checked attribute to indicate whether this item is selected by default. Radio buttons that have the same value for the name attribute are in the same "radio button group". Only one radio button in a group can be selected at a time.
– MDN HTML Element Reference - <input>
See also:
AngularJS input[radio] Directive API Reference
AngularJS ng-value Directive API Reference
AngularJS ng-checked Directive API Reference
Here is the html part:
<input class="demo" radio-value="yes" name="Radios" id="sample1" value="" type="radio">
<input class="demo" radio-value="yes" name="Radios" id="sample2" value="" type="radio">
<input class="demo" radio-value="yes" name="Radios" id="sample3" value="" type="radio">
<input class="demo" radio-value="yes" name="Radios" id="sample4" value="" type="radio">
How can I know which radio button the user is selected and how can I know the value of selected radio button.
I want to get the "radio-value" of the selected button. Because, I will be using value for json input..
How can I do that??
First of all, all of your radio buttons have the same id - this is illegal and can cause unexpected behavior. Provided this is fixed, you can do something like this:
var selectedValue = $("input.demo:checked").val();
and for radio-value:
var selectedRadioValue = $("input.demo:checked").attr("radio-value");
Use :selected with class selector to get the selected radio button. You should give unique ids to html elements. Also the value of all the radio button is empty string you may need to assign some values to them
$('.demo:selected').val();
$('.demo:selected').val(); // class is demo
This would do the trick!
But you need to remove the id that is similar among all the elements. You should change their value such as sample1, sample2 etc. Then you can get the value, and the id.
I have one checkbox initially set to false if any user checked it, it must be set to true
this what i have tried.
<div class="control-group">
<div class="controls">
<label class="lbl">Force SSL</label>
<input type="checkbox" name="force_ssl" id="force_ssl" />
</div>
</div>
when i have dumped it getting on instead 1. in case keep this value in hidden field getting wrong data 0, on. can anyone help me out what shall i have to change in it ? Thanks
You just need to add value to your checkbox.
<input type="checkbox" name="force_ssl" id="force_ssl" value="1" />
I have used JavaScript to hide the divs containing form elements:
<script type="text/javascript">
<!--
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
//-->
</script>
When certain checkbox(es) are selected the respective div(s) are shown or get visible:
<form>
<input type="checkbox" name="modtype" value="value1" onclick="showMe('div1', this)" />value1
<input type="checkbox" name="modtype" value="value2" onclick="showMe('div2', this)" />value2
<input type="checkbox" name="modtype" value="value3" onclick="showMe('div3', this)" />value3
<input type="checkbox" name="modtype" value="value4" onclick="showMe('div4', this)" />value4
<input type="checkbox" name="modtype" value="value5" onclick="showMe('div5', this)" />value5
<div class="row" id="div1" style="display:none">Show Div 1 <input type="text" name="valueone" id="valueone" /></div>
<div class="row" id="div2" style="display:none">Show Div 2 <input type="text" name="valuetwo" id="valueone" /></div>
<div class="row" id="div3" style="display:none">Show Div 3 <input type="text" name="valuethree" id="valueone" /></div>
<div class="row" id="div4" style="display:none">Show Div 4 <input type="text" name="valuefour" id="valueone" /></div>
<div class="row" id="div5" style="display:none">Show Div 5 <input type="text" name="valuefive" id="valueone" /></div>
<br />
<input type="submit" name="button" id="button" value="Submit" />
</form>
In the above case I have used 5 divs with five inputs, if a user selects two checkboxes and submits the form, I don't want the other 3 input fields to get submitted with empty fields. Rather ONLY selected 2 input field's value should get submitted.
You can try disabling the blank fields as disabled fields do not submit with the form.
This is not the way forms work. You need to either:
modify the value of the inputs (usually bad) or...
manipulate the DOM elements to modify what is part of the form and what is not at a structural (and not styling) level (very bad) or...
break this into multiple forms and submit the one you're interested in only or...
disregard the information you're not interested in at the server side or...
change your form design.
Without further evidence I'd go with one of the latter two.
I can think of only two ways to solve this:
Check the values of checkboxes on server and ignore the textbox values (but the values will still be sent to server)
When unchecked, completely remove the divs (or just inputs) from the form using JavaScript and add them back when checkbox is checked
Slightly modified version of the previous one would be to have another hidden form, where you can move the divs when unchecked. You need to remove the elements from current form and move them back when checkbox is checked - this way, you could preserve the values user already filled into the textboxes, but when unchecked, the values won't be submitted with current form.