Getting radio button selected value - javascript

How can I get the radio button clicked value?
Actually I need a custom filter for gender which I selected in my <form>. From the output I need to filter with gender. My filter and orderBy in ng-repeat is not working properly.
Here is a link to my Plunker example: http://plnkr.co/edit/7ZBcMDrJzSreD73R9aNq?p=preview
for(var i=0;i<$scope.details.length;i++) {
if($scope.details[i]===$scope.options[i])
$scope.details=myService.getForm($scope.user);
}

In your Plunker given the value from the Gender is getting within the $scope.user
$scope.submitTheForm=function(){
myService.setForm($scope.user);
$scope.user={};
};
Check this Working Demo

I'm not sure about your jsfiddle but here is a quick example of how you do it:
<div class="radio" data-ng-repeat="detail in details">
<label>
<input type="radio" data-ng-model="$parent.ngModel" name="ngModel" value="{{detail.id}}" required />
{{detail.title}}
</label>
</div>
in your controller just use $scope.ngModel and you will get the result.

Related

unable to bind value to radio button

I am trying to implement a radio group in a list of items. I am unable to set the radion button checked based on the value. Please guide me.
HTML
<div *ngFor="let item of data; let i = index">
<nb-radio-group class="p-3 d-inline-flex">
<nb-radio [checked]="item.data.v === true">open</nb-radio>
<nb-radio [checked]="item.data.v === false">close</nb-radio>
</nb-radio-group>
</div>
only the radio button in last item of an array shows wether the radio button is checked or not. others does not bind data properly.
Please consider using the value property
<nb-radio-group class="p-3 d-inline-flex" [(value)]="item.data.v">
<nb-radio [value]="true">open</nb-radio>
<nb-radio [value]="false">close</nb-radio>
</nb-radio-group>
you should use a *ngswitch to display your opion then based on if the user click or not you will bind data see this example using checkbox and also item.data,v should be a boolean
enter code here
<td><input type="checkbox" [(ngModel)]="item.done" /></td>
<td [ngSwitch]="item.done">
<span *ngSwitchCase="true">
Yes
</span>
<span *ngSwitchDefault>
No
</span>
</td>
and also u should use a filter to return data based on true or false

required field for checkboxes

I have added list of checkboxes in following way. And I have added required property also. Because user should select at least one checkbox.
<div ng-repeat="student in vm.students">
<label class="checkbox-inline">
<input type="checkbox" value="{{studentName}}" ng-model="student.selected" name="students" required>
{{sim.name}}
</label>
</div>
<div data-ng-messages="userform2.simulations.$error" data-ng-if="vm.interacted(userform2.simulations)" class="error-messages">
<div data-ng-message="required">You should select atleast one sim.</div>
</div>
But this one doesn't work. It works for last checkbox only. If check and uncheck the last one the error message is appear, It doesn't look whether other checkboxes are selected or not. Any possible way will be highly appreciable.
In angular you should use ng-required=true to set 'required' on the input
The docs:
https://docs.angularjs.org/api/ng/directive/input
Follow this link
CheckBox List
you will get the answer ithink you missed checklist -value or you need validation on it for select one check box.
for validation take full list and check every property if any no value is checked then generate a message for it.
I hope it will be help to you

Have to click radio button twice for html element to change using AngularJS

I have a very simple form where I have Yes and No radio buttons. Each radio button is bound to the same item in the scope (I am using AngularJS). The Yes button's value gets set to true on being selected and the No button's value gets set to false when being selected.
When I click the Yes button once, both the model and the html element changes correctly. But when I click the No radio button, the model changes correctly but the html element does not become selected. If I click the No radio button again the html element then changes to it's correct selected state.
The example below is just part of a larger html page and controller but I have kept the Angular model structure the same because this may be where the issue is.
HTML:
<div ng-app="myApp">
<div ng-conroller="MyController">
<div>
<label>
<input type="radio" name="IsBeingPaid" ng-model="item.isBeingPaid" ng-checked="item.isBeingPaid" value="true"/>
Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="IsBeingPaid" ng-model="item.isBeingPaid" ng-checked="!item.isBeingPaid" value="false"/>
No
</label>
<p>{{item.isBeingPaid}}</p>
</div>
</div>
</div>
Controller:
var app = angular.module('myApp', [
'my.controllers'
]);
var controllers = angular.module('my.controllers', []);
controllers.controller('MyController', function($scope) {
$scope.item = {};
});
I have created this fiddle to demonstrate the issue.
http://jsfiddle.net/prajna78/Tdq9n/14/
What am I missing? It seems like such a simple thing.
There are a few problems with your code.
First, use ng-value instead of value in your radio button elements. This makes sure that the value you're binding to is a boolean (true) and not a string ("true"). Also, you don't need ng-checked (ng-model is sufficient).
<input type="radio" name="IsBeingPaidMinimumWage" ng-model="isBeingPaidMinimumWage" ng-value="true"/>
Also, you're binding to item.isBeingPaidMinimumWage, but your $scope variable is just isBeingPaidMinimumWage, so the initial value that you assign in your controller isn't reflected in the view.
Demo

How to use an object as ng-value of a radio button?

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?

checkbox limitation with ng-model in angularjs

so far I've only seen people used ng-model to bind the state of checkbox. How can I know which checkbox is checked with angularjs? for example I want to get the index of the checked checkedbox so that I can do something on the backend.
If it were in jquery / js I can use function to catch the state of the checkbox and send the index or etc info to be send back to database.
my plunker : http://plnkr.co/edit/dG9cwswiVzLdjEnpSNvu?p=preview
You could use ng-click, like this:
http://plnkr.co/edit/kOTtbSHbw1kaGWmjqQbf?p=preview
I am not clear about your problem but if you want label which associate with checkbox then you should use ng-init.
<div ng-controller="main">
<div class="checkbox" ng-repeat="item in items">
<input type="checkbox" id="{{$index}}" ng-model="item.done"><label for="{{$index}}" class="done-{{item.done}}" ng-init="item.text='Label for' + item.val">Label for {{item.val}}</label>
</div>
{{items}}
</div>
See Demo

Categories

Resources