Here is my radio buttons code
<input type="radio" ng-model="choice.phone" ng-value="1" name="phone" ng-
click="setPhoneType('cell')"> cell phone<br/>
<input type="radio" ng-model="choice.phone" ng-value="2" name="phone" ng-
click="setPhoneType('Home')"> Home phone <br/>
Now when a user choose any of them then below radio button should be checked as default
<input type="radio" ng-model="choice.International" ng-value="1"
name="international" ng-click="setChoiceType('Inter')" ng-checked="choice.phone"> International call
The js code is as follow:
setPhoneType = function setPhoneType(phoneType) {
$scope.phone = phoneType;
$scope.setChoiceType('Inter');
return;
},
setChoiceType = function setChoiceType(callType) {
$scope.international = callType;
return;
},
The problem is that when I choose any phone then the Inter is checked automatically but later on the value is undefined, It goes to setChoiceType but after that choice.International is undefined. If I manually choose Inter (by clicking on it) it is fine.
Your radio buttons are bound to properties of the choice object. But, setPhoneType and setChoiceType update values directly on the scope - not the choice object. Also, I think you want to use value, not ng-value.
Here is plnkr.
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 have a dropdown and a radio button beside it. When an item is selected in the dropdown
and a user clicks on the radio button, I will like the dropdown to reset itself and have
"Select Number" as the default value.
How can i acheive that?
<div class="selection">
<label for="accountNumber" class="lbl">#T("Customer Account:")</label>
<select id="accountNumber" class="sel" name="accountNumber" ng-model="vm.defaultValue"
ng-options="item for item in vm.retrieveAliasName">
<option value="">Select Account</option>
</select>
</div>
<div id="acctsAll" class="all">
<input type="radio" id="AllAccounts" /><span class="lbl">("All")</span>
</div>
First of all you have to assign your input of type radio a model via ng-model directive. Then you have to check wether this model value matches the "All" value and clear default value of your vm.defaultValue.
Moreover if I get it right you need to clear and disable the select input when "All" radio is selected, but you might need an other radio which allows user to choose an option from select input. Based on that I've created this fiddle to help you out.
Notice the following parts:
<input ng-change="vm.clearDefaultValue()" ng-model="vm.areAllSelected" type="radio" id="AllAccounts" ng-value="true" />
and controller function:
this.clearDefaultValue = function() {
this.defaultValue = null;
}
I have a json object containing some properties, whose values can become 0. They are bound to a set of radio buttons (the first ones value is 0). The problem is now, that if i choose the first radio button, the property will be removed by angular.js by default. But i want to keep it with a zero as value.
I also need a way to preselect the first radio button if the value of the bound property is 0/the property doesn't exist. The checked="checked" attribute doesn't work for any reason it the bound value is 0/doesn't exist.
Is there a way to achieve it? Thank you.
The radio buttons:
<input type="radio" name="type" ng-value="0" ng-model="item.type"
ng-init="item.type=0" ng-checked="true"/>
<input type="radio" name="type" ng-value="1" ng-model="item.type"/>
<input type="radio" name="type" ng-value="2" ng-model="item.type"/>
<input type="radio" name="type" ng-value="3" ng-model="item.type"/>
The controller:
$scope.item = {
type: 0
};
new in angular here.
I have an input field disabled base on the radio button, if the radio button was selected, I first want the input field value to null and then disabled it.
Here is my current example:
<input type="radio" ng-model="vm.radio" value="selected" /> Sample
<input type="text" ng-model="vm.input" ng-disabled="vm.radio='selected'" />
When input have the value, it just disabled and keep the input value.
I can do check inside the controller like
if(vm.radio=='selected') { vm.input = null }
But it only work when I active the function via the button. Is there any good way to handle it at HTML page, on the change event? Not in a controller script.
take a look at this plnkr: https://plnkr.co/edit/IygRaPlBmLzdnI0jhAQn?p=preview
You can use ng-change specifying an expression
<input type="radio" ng-model="vm.radio" value="selected" ng-change="vm.radio === 'selected' ? vm.input = '' : '' " /> Sample
<input type="radio" ng-model="vm.radio" value="b" /> Sample2
<input type="text" ng-model="vm.input" ng-disabled="vm.radio === 'selected'" />
I have 2 radio buttons like this, and 2 text boxes that should be enabled based on the choice on the radio buttons.
<input type="radio" name="type" ng-model="outputType" value="1"> Choice1 <br/>
<input type="radio" name="type" ng-model="outputType" value="2"> Choice2 <br/>
<td><input type="text" ng-model="name" value="name" ng-disabled="istypeSelected('1') " size="5"> Name <br/></td>
<td><input type="text" ng-model="date" value="date" ng-disabled="istypeSelected('2')" size="5"> date <br/></td>
and here is a button
<button class="btn" type="button" style="" ng-click="update()">update</button>
I want to run some sql query in the back end when user hit the button. But I need to know which of the radio buttons has been chosen also. How can I access it?
In your controller, you should simply be able to access $scope.outputType and that will take the value of the radio button (i.e. 1 or 2) and assign it to whatever variable you wish to assign it to.
i.e.
var myChoice = $scope.outputType;
http://docs.angularjs.org/api/ng/input/input%5Bradio%5D
EDIT
Hard to say what's up, because I couldn't see your controller. The following displays just fine in the console for me:
var myapp = angular.module('myapp',[]);
myapp.controller('FormCtrl', ['$scope',
function($scope) {
$scope.update = function() {
var myChoice = $scope.outputType;
console.log(myChoice);
};
}]);
And, you also need to assign which controller to your form element:
form ng-controller='FormCtrl'