I have a model returning in the storeLocations object with a isDefault value. if isDefault returns true, I wan't to set that radio button in the group as checked.
Not sure if I need to do a $each(data, function(index,value) and iterate through each object returned or if there's an easier way to do this using angular constructs.
Object:
storeLocations = [
{
... more values,
isDefault: true
}
]
Markup:
<tr ng-repeat="location in merchant.storeLocations">
<td>{{location.name}}</td>
<td>{{location.address.address1}}</td>
<td>{{location.address.address2}}</td>
<td>{{location.address.city}}</td>
<td>{{location.address.stateProvince}}</td>
<td>{{location.address.postalCode}}</td>
<td>{{location.address.country}}</td>
<td>{{location.website}}</td>
<td>{{location.zone}}</td>
<td><input type="radio" ng-model="location.isDefault" value="{{location.isDefault}}" name="isDefault_group"></td>
Use ng-value instead of value.
ng-value="true"
Version with ng-checked is worse because of the code duplication.
If you have a group of radio button and you want to set radio button checked based on model, then radio button which has same value and ng-model, is checked automatically.
<input type="radio" value="1" ng-model="myRating" name="rating" class="radio">
<input type="radio" value="2" ng-model="myRating" name="rating" class="radio">
<input type="radio" value="3" ng-model="myRating" name="rating" class="radio">
<input type="radio" value="4" ng-model="myRating" name="rating" class="radio">
If the value of myRating is "2" then second radio button is selected.
One way that I see more powerful and avoid having a isDefault in all the models is by using the ng-attributes ng-model, ng-value and ng-checked.
ng-model: binds the value to your model.
ng-value: the value to pass to the ng-model binding.
ng-checked: value or expression that is evaluated. Useful for radio-button and check-boxes.
Example of use:
In the following example, I have my model and a list of languages that my site supports. To display the different languages supported and updating the model with the selecting language we can do it in this way.
<!-- Radio -->
<div ng-repeat="language in languages">
<div>
<label>
<input ng-model="site.lang"
ng-value="language"
ng-checked="(site.lang == language)"
name="localizationOptions"
type="radio">
<span> {{language}} </span>
</label>
</div>
</div>
<!-- end of Radio -->
Our model site.lang will get a language value whenever the expression under evaluation (site.lang == language) is true. This will allow you to sync it with server easily since your model already has the change.
Ended up just using the built-in angular attribute ng-checked="model"
As discussed somewhat in the question comments, this is one way you could do it:
When you first retrieve the data, loop through all locations and set storeDefault to the store that is currently the default.
In the markup: <input ... ng-model="$parent.storeDefault" value="{{location.id}}">
Before you save the data, loop through all the merchant.storeLocations and set isDefault to false except for the store where location.id compares equal to storeDefault.
The above assumes that each location has a field (e.g., id) that holds a unique value.
Note that $parent.storeDefault is used because ng-repeat creates a child scope, and we want to manipulate the storeDefault parameter on the parent scope.
Fiddle.
Just do something like this,<input type="radio" ng-disabled="loading" name="dateRange" ng-model="filter.DateRange" value="1" ng-checked="(filter.DateRange == 1)"/>
Related
I have html code like this having a class name:
<input type="checkbox" value="Yes" id="ques11" name="radiobutton" class="option_1" />
and I also have another line
<input type="checkbox" value="Yes" id="ques12" name="radiobutton" class="option_2" />
If I check the first check box, I want to get the class name of that check box as the output, and to store it in a script variable. How do I get this class name?
From within a click handler attached using jQuery (or several other ways), this is a reference to the input, you don't need closest.
That isn't your problem, though, your problem is trying to call val on an array. If you want the second entry in the array from split, just use [1]:
var quesNo = this.className.split("_")[1];
Note that this assumes there is only a single class on the input.
Rather than using a class name for this, though, I suggest using a data-* attribute:
<input type="checkbox" value="Yes" id="ques11" name="radiobutton" data-quesno="" />
then
var quesNo = $(this).attr("data-quesno");
(You'll get people telling you to use .data("quesno") instead. Only do that if you need the features data provides. It is not an accessor for data-* attributes, that's a common misconception.)
I have the following HTML in the page body - these are the only input's of type checkbox on this HTML page:
<fieldset>
<legend>North Face</legend>
N-A1:
<input type="checkbox" name="NorthFace" value="N-A1" id="NA1">
N-B2:
<input type="checkbox" name="NorthFace" value="N-B2" id="NB2">
N-C3:
<input type="checkbox" name="NorthFace" value="N-C3" id="NC3">
N-D4:
<input type="checkbox" name="NorthFace" value="N-D4" id="ND4">
N-E5:
<input type="checkbox" name="NorthFace" value="N-E5" id="NE5">
N-F6:
<input type="checkbox" name="NorthFace" value="N-F6" id="NF6">
N-G7:
<input type="checkbox" name="NorthFace" value="N-G7" id="NG7">
N-H8:
<input type="checkbox" name="NorthFace" value="N-H8" id="NH8">
</fieldset>
<br />
<fieldset>
<legend>South Face</legend>
S-A1:
<input type="checkbox" name="SouthFace" value="S-A1" id="SA1">
S-B2:
<input type="checkbox" name="SouthFace" value="S-B2" id="SB2">
S-C3:
<input type="checkbox" name="SouthFace" value="S-C3" id="SC3">
S-D4:
<input type="checkbox" name="SouthFace" value="S-D4" id="SD4">
S-E5:
<input type="checkbox" name="SouthFace" value="S-E5" id="SE5">
S-F6:
<input type="checkbox" name="SouthFace" value="S-F6" id="SF6">
S-G7:
<input type="checkbox" name="SouthFace" value="S-G7" id="SG7">
S-H8:
<input type="checkbox" name="SouthFace" value="S-H8" id="SH8">
</fieldset>
I have a SUBMIT button on this HTML page that when clicked by the user runs some javascript that needs to evaluate these checkboxes - so I do the following:
var checkboxes = document.querySelectorAll("input[type=checkbox");
so far every time I have checked the array checkboxes indexes 0-7 of checkboxes are N-A1 through N-H8 and indexes 8-15 are S-A1 through S-H8.
Question 1: as long as these remain the only checkbox type on this HTML page and they are always in this order on the page is this order in checkboxes array always guaranteed? (that is will the first 8 always be N-xx and the second 8 always be S-xx?)
Question 2: if a checkbox get's added somewhere else on this HTML page I'm hosed so what would be the best way to get only this set of checkboxes? Put sometype of div with an id around these 2 fieldset's or put some type of id on each of these fieldsets like "north" and "south". Give quick example of how to fetch the checkboxes in this case.
Question 3: what I really want in the end is to send only the checkboxes that are checked to my PHP backend - currently I am using a for loop in javascript on checkboxes to find which boxes are checked in javascript then send those that are checked in the POST to my PHP code. Is there a better way - best way to do this maybe just sent the whole checkboxes array in the POST and process in PHP to find who's checked?
Thanks in advance for ideas/suggestions...
1
Yes, the order is guaranteed.
The specification states
The querySelectorAll() methods on the Document, DocumentFragment, and
Element interfaces must return a NodeList containing all of the
matching Element nodes within the subtrees of the context node, in
document order. If there are no matching nodes, the method must return
an empty NodeList.
meaning the elements will be returned in the order they appear in the document
2
If checkboxes are added, the best way to get those elements would be to keep track of them when inserting.
Other than that, wrapping them in another element with an ID or class would work as well, or just giving the new checkboxes a class
var new_boxes = document.querySelectorAll('.new_boxes');
3
Generally you'd just submit the form, and the checked boxes will be sent automatically.
If you're sending the data with ajax, you can get the checked boxes with an attribute selector
var boxes = document.querySelector('input[type="checkbox"][checked]');
I am trying to set the checked value of a checkbox to incoming data from Mongo. It works fine if the value is true, but when the value is false, it still checks the box. Can anyone tell me what is wrong.
<input type="checkbox" id="chk" name="interested" value="{{inmate.interested}}" onclick="chkSet(this)">Not Interested <br/>
<input type="checkbox" id="chk" name="correspondence" value="{{inmate.correspondence}}" onclick="chkSet(this)">Req Correspondence<br/>
<input type="checkbox" id="chk" name="study" value="{{inmate.study}}" onclick="chkSet(this)">Request Study<br/>
<input type="checkbox" id="chk" name="specialtyItemsApproved" value="{{inmate.specialtyItemsApproved}}" onclick="chkSet(this)">Specialty Items
Approved<br/>
<br>
$(document).ready(function(){
document.getElementsByName("interested")[0].checked=document.getElementsByName("interested")[0].value;
document.getElementsByName("correspondence")[0].checked=document.getElementsByName("correspondence")[0].value;
document.getElementsByName("study")[0].checked=document.getElementsByName("study")[0].value;
document.getElementsByName("specialtyItemsApproved")[0].checked=document.getElementsByName("specialtyItemsApproved")[0].value;
});
document.getElementsByName("interested")[0].checked=document.getElementsByName("interested")[0].value; sets the checked property based on the value of the element, which is always a string. So it will coerce the string to a boolean. All non-blank strings are truthy, so both "true" and "false" will set checked to true.
If you use an == test, you can set the checked accordingly:
document.getElementsByName("interested")[0].checked =
document.getElementsByName("interested")[0].value == "true";
That said, the purpose of the value of a checkbox in HTML/DOM is not to indicate whether it's checked, so setting value to "true" or "false" in the first place is probably not what you really want to do. The purpose of value is to say what value should be sent with the form if the checkbox is checked. Example:
<input type="checkbox" name="roomoptions" value="non-smoking">
<input type="checkbox" name="roomoptions" value="with-kitchen">
<input type="checkbox" name="roomoptions" value="en-suite">
The form will have roomoptions=non-smoking if that checkbox is checked, and/or roomoptions=with-kitchen if that checkbox is checked, and/or roomoptions=en-suite if that checkbox is checked. If none of them is checked, the form won't have any roomoptions sent at all. All three are sent if all three checkboxes are checked.
Separately, you cannot use the same id on more than one element in an HTML/DOM document. ids must be unique. So you can't use id="chk" on all of your checkboxes.
So I suspect you really want something more like this:
<input type="checkbox" id="chk-interested" name="interested" {{#if inmate.interested}}checked{{/if}} onclick="chkSet(this)">Not Interested <br/>
<input type="checkbox" id="chk-correspondence" name="correspondence" {{#if inmate.correspondence}}checked{{/if}}" onclick="chkSet(this)">Req Correspondence<br/>
<input type="checkbox" id="chk-study" name="study" {{#if inmate.study}}checked{{/if}} onclick="chkSet(this)">Request Study<br/>
<input type="checkbox" id="chk-specialty-items-approved" name="specialtyItemsApproved" {{#if inmate.specialtyItemsApproved}}checked{{/if}} onclick="chkSet(this)">Specialty Items
Then you don't need your JavaScript at all.
I didn't put a value on those, which means that when the form is sent in (if you're sending in the form), the value for interested and such that the server will receive will be the default value "on". E.g., the form will either not have an interested field at all (the checkbox wasn't checked), or it will have interested=on.
Note that unless you use those ids for something, you can just leave them off; it's the name that the form will use when submitted. But I made them unique to demonstrate that you must do that.
I am generating an HTML form with some radio buttons and checkboxes. the generated code for the radio buttons for instance are like these:
<input id="101_2" type="radio" name="101" value="2" >
<input id="101_3" type="radio" name="101" value="3" checked="true">
Using JavaScript I can make a for cycle to see what radio is checked using the check attribute.
The problem is that if I manually click in another radio option (from the same group as in the example), visually in the HTML I can see that another radio is selected, but the JavaScript is still saying that the input 101_3 is the selected radio option. If I look at the HTML using firebug I can see that the new selected option is indeed not selected (doesn't have the checked attribute)... despite I have selected manually.
Any ideas on this?
Fist and formost when naming your radio buttons or any type of DOM input element never start the name of an input element with a number, always start the name of your input element with a letter.
For your posted code you would name your radios in similar fashion, one01 or x101 or o101,ect...
Do the same thing with your ids' of any DOM element. Never start an id of a DOM element with a number.
--HTML
<input id="x101_2" type="radio" name="x101" value="2">
<input id="x101_3" type="radio" name="x101" value="3" checked="checked">
<br /><br />
<button type="button" onclick="WhatsChecked()">Whats Checked?</button>
--JavaScript
function WhatsChecked() {
var radCk = document.body.querySelectorAll('input[name="x101"]:checked')[0];
alert(radCk.id);
};
--Fiddler
fiddler
Is there any way to use an object for ng-value of a radio button?
Imagine you have a radio button whose ng-model is an object, like this:
modelObject: {val:'', text:''}
And this would be the radio button:
<input type="radio" ng-model="data.modelObject" ng-value=""/>
Is there a way to do something like the following (obviously it doesn't work)
<input type="radio" model="data.modelObject" ng-value="val:option.id, text:option.text"/>
?
Thanks
I know I can use the ng-change directive. I'm just wondering if what I am asking it's possible, it would be very smart
EDIT:
as requested in the comments, I am giving a bit of extra info on my setup.
I want to save in the model both the value of the button and its label. So let's say I have an array in my controller called impactOptions and a ng-repeat directive to create the buttons:
<div ng-repeat="option in impactOptions" >
<input type="radio" ng-model="data.modelObject.val" id="rbGroup{{option.id}} ng-value="option.id"/>
<label for="rbGroup{{option.id}}">{{option.text}}</label>
</div>
The problem with this setup is that in that way I'm only saving the value of the button, while I would like to also save it's label. I really need it later.
I'm looking for a way to do something like this
<input type="radio" model="data.modelObject" ng-value="val:option.id, text:option.text"/>
You can have an object as the value in ng-value:
<div ng-app>
<input type="radio" ng-model="modelObject" ng-value="{val:1, text:'text'}"/>
<p>>{{modelObject|json}}<</p>
</div>
example fiddle
The values in ng-value can also be dynamic as well per request:
<div ng-app ng-init="opt={id: 1, text: 'some text'}">
<input type="radio" ng-model="modelObject" ng-value="{val:opt.id, text:opt.text}"/>
<p>>{{modelObject|json}}<</p>
</div>
updated example fiddle
You can use ng-value="option":
<input type="radio" model="data.modelObject" ng-value="option"/>
When you need id you can have it from $scope.option.id and when you need text you can access it from $scope.option.text. Check my answer here. Does this work for your case?