I am having a structure something like this
<div>
<span>Employer</span>
<input type="radio" value="Current">
</div>
<div>
<span>Employer</span>
<input type="radio" value="Previous">
</div>
<div><button>Add Employer</button>
<div>
<span>Employer</span>
<input type="radio" value="Current">
</div>
<div>
<span>Employer</span>
<input type="radio" value="Previous">
</div>
<div><button>Add Employer</button>
I select Employer as Current.
I went on to add the new employer.
In new employer radio button it should have default selection as radio button "previous"
Am try to work on such conditions. If any one can please help in Checked If condition on dynamically created radio button please!
Thanks
You can set default value to the button using ng-value. Something like this:
<input type="radio" ng-value="true" value="Previous">
Related
in Angular I'm doing something like this to show and hide elements when a links is clicked.
<a ng-click="showEle = !showEle"><span ng-bind="showEle ? 'Hide' : 'Show'"></span> Element</a>
<div ng-if="showEle">
<div>
I need to do something similar but show a div based on a radio button being click.
<input type="radio" name="element" value="did" id="">Div One</br>
<input type="radio" name="element" value="did" id="">Div Two</br>
<div>
Div One
</div>
<div>
Div two
</div>
Both radio buttons are deselected to start then clicking either radio buttom will show either div.
You need to init scope variable before using it.
<input type="radio" name="element" value="did" ng-click="flag = 'div1'">Div One</br>
<input type="radio" name="element" value="did" ng-click="flag = 'div2'" id="">Div Two</br>
<div ng-show="flag == 'div1'">
Div One
</div>
<div ng-show="flag == 'div2'">
Div two
</div>
To use ng-model you need to apply two different values to both the radio button like this.
<input type="radio" name="element" ng-value="div1" ng-model="flag">Div One</br>
<input type="radio" name="element" ng-value="div2" ng-model="flag">Div Two</br>
<div ng-show="flag == 'div1'">
Div One
</div>
<div ng-show="flag == 'div2'">
Div two
</div>
You need to use ng-model for the radio button, then put ng-show on the divs:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
<input type="radio" name="element" value="one" id="" ng-model="flag" />Div One<br />
<input type="radio" name="element" value="two" id="" ng-model="flag" />Div Two<br />
<div ng-show="flag == 'one'">
Div One
</div>
<div ng-show="flag == 'two'">
Div two
</div>
</div>
the expression inside the ng-show does a check whether the flag is set to the value. If it is, show the div, if not, don't show.
Here is a CodePen
Reference for ng-show
I think this might be what you are looking for. Use ng-model with your radio buttons. Then check the model value on the divs (combined with nd-show).
<label class="radio-label"><input type="radio" class="multiple-option" ng-model="ctrl.selectMsgStatus" ng-value="null" />Red</label>
<label class="radio-label"><input type="radio" class="multiple-option" ng-model="ctrl.selectMsgStatus" ng-value="true" />Blue</label>
<label class="radio-label"><input type="radio" class="multiple-option" ng-model="ctrl.selectMsgStatus" ng-value="false" />Green</label>
<div style="background-color:red" ng-show="ctrl.selectMsgStatus == null">Red</div>
<div style="background-color:blue" ng-show="ctrl.selectMsgStatus == true">Blue</div>
<div style="background-color:green" ng-show="ctrl.selectMsgStatus == false">Green</div>
I hope it helps!
I am trying to follow the angular docs for radio buttons.
https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
Don't know what I'm doing wrong.
Ultimately, I want the div "stuff" to have class "muted" if radio option 3 is selected.
my html:
<form name="shippingVm.MasterCartonForm" ng-controller="shippingControler as shippingVm" >
[{{shippingVm.shipOption.val}}]
<div class="col-sm-3 col-sm-offset-1">
<label class="radio-inline">
<input type="radio" ng-model="shippingVm.shipOption.val" name="shippingOptions" ng-value="one" />
I will call Purolator for a pickup.
</label>
</div>
<div class="col-sm-3">
<label class="radio-inline">
<input type="radio" ng-model="shippingVm.shipOption.val" name="shipOptions" ng-value="two" />
I will deliver them to Purolator.
</label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" ng-model="shippingVm.shipOption.val" name="shipOptions" ng-value="muted" />
I will deliver them to the Wizmo warehouse myself.
</label>
</div>
<div class="ng-class="shippingVm.shipOption.val">
stuff
</div>
</form>
my controller:
vm.shipOption = {val: "NOT-muted"};
This debugging line in the HTML checks to see if I'm getting the right value:
[{{shippingVm.shipOption.val}}]
It starts with [NOT-muted] - as it should. But the moment I select any radio button it goes blank.
According to the docs, clicking a radio should pass the radio's value into the model.
What am I missing?
Your ng-class is incorrect. See the below snippet for an example of what it should be. The second problem is that you want value instead of ng-value. From: https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
value The value to which the ngModel expression should be set when selected. Note that value only supports string values, i.e. the scope model needs to be a string, too. Use ngValue if you need complex models (number, object, ...).
ngValue Angular expression to which ngModel will be be set when the radio is selected. Should be used instead of the value attribute if you need a non-string ngModel (boolean, array, ...).
.muted {
color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<label>Chicken or the Egg?</label>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="chickenEgg" value="chicken" ng-model="formData.chickenEgg">Chicken
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="chickenEgg" value="egg" ng-model="formData.chickenEgg">Egg
</label>
</div>
</div>
<div ng-class="{'muted': formData.chickenEgg === 'egg'}">
stuff
</div>
</div>
Oh, I see it now.
The radio buttons should have value="muted" not ng-value="muted".
ng-value is only used in a special case.
I have a angujarJS application and I have a form with hidden rows. when 'Yes' is selected to the trigger row, another row is displayed with a 'Yes' and 'No' radio button on.
What I'm trying to do is clear any selected radio button for the hidden row if 'No' is selected in my trigger row but I cant figure it out at all.
Its probably easy but I'm just code blind with it.
Trigger row
<div class="row">
<label class="col-sm-7 col-md-6">Show hidden row?</label>
<div class="col-sm-4">
<input name="firstgroup" type="radio" ng-model="transferitems.firstgroup" value="Yes" required />Yes
<input name="firstgroup" type="radio" ng-model="transferitems.firstgroup" value="No" required />No
</div>
</div>
Hidden row
<div class="row" ng-show="transferitems.firstgroup == 'Yes'">
<label class="col-sm-7 col-md-6">Is hidden row displayed?</label>
<div class="col-sm-4">
<input name="secondgroup" type="radio" ng-model="transferitems.secondgroup" value="Yes" required />Yes
<input name="secondgroup" type="radio" ng-model="transferitems.secondgroup" value="No" required />No
</div>
</div>
You can condense Neel's answer and put the assigment directly in the ng-click expression on the 'No' element. It is a more compact and don't have to have extra function in $scope.
Like so:
<input name="firstgroup" type="radio" ng-model="transferitems.firstgroup"
ng-click="transferitems.secondgroup=''" value="No" required />No
If you add ng-click on trigger row like
<input name="firstgroup" type="radio" ng-model="transferitems.firstgroup" value="No" ng-click="triggerChange()" required />
Then you can define a scope function where you would check the first row trigger condition and accordingly clear hidden radio buttons.
$scope.triggerChange = function(){
if($scope.transferitems.firstgroup=="No"){
$scope.transferitems.secondgroup='';
}
}
Another way is to pass $event to ng-click="triggerChange($event)"
then you can compare value
if(event.target.value == "No"){
$scope.transferitems.secondgroup='';
}
Here is the part of the code for radio box
<div class="row">
<div class="col-sm-10">
<div>
<label ng-click="setGroup(true)">
<input type="radio" id="groupNamId" name="quality[21]" checked="checked" ng-value="isGroupName" /> Group Name
</label>
<label ng-click="setGroup(false)">
<input type="radio" id="Distinguished1" name="quality[21]" ng-value="!isGroupName" /> DN Name
</label>
</div>
</div>
</div>
Now the radio box is checked on "Group Name" but I want the radio box is checked on either Group Name or DN Name basing on the isGroupName. So if isGroupName = true then Group Name radio box is checked and if isGroupName=false then DN Name radio box is checked. Any suggestion for changing the radio checked on isGroupName? I have use ng-checked but it didn't work.
Thanks,
Kim
You should us ng-model to manage your radio with angular properly.
<div class="row">
<div class="col-sm-10">
<div>
<label ng-click="setGroup(true)">
<input type="radio" id="groupNamId" name="quality[21]" ng-model="isGroupName" value="Group" /> Group Name
</label>
<label ng-click="setGroup(false)">
<input type="radio" id="Distinguished1" name="quality[21]" ng-model="isGroupName" value="DN" /> DN Name
</label>
</div>
</div>
</div>
And in your controller :
<script>
angular.module('radioExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.isGroupName = "DN";
}]);
</script>
With ng-model, no need to a boolean isGroupName ... Angular will automaticaly ind proper value based on your data. No error possible like forgetting keep your boolean sync.
This Plunker explain well how it works : http://plnkr.co/edit/vjryMq3SbJEdhSjiqZ9U?p=preview
I am working on a QA app where i need to add multiple answers to a question as per requirement dynamically. for this in my form I have a question field , an answer field and a Boolean correct field to tell if the answer choice is correct or not. I have given a button add another answer which create a new answer field when clicked.I want to give ng-model name dynamically so that I can easily retrieve the value of ng-model.
For this I have created a controller which is like
app.controller('questionsCtrl', function ($scope) {
$scope.question={};
$scope.question.answers=[];
$scope.answer_choices=[];
var choice=1;
$scope.addAnswerField=function(){
$scope.answer_choices.push(choice);
choice++;
}
$scope.addAnswerChoice=function(){
$scope.question.answers.push({});
}
});
My HTML code is:
<div class="container">
<form ng-submit="createQuestion()">
<textarea class="form-control" ng-model='question.question_text'></textarea>
<textarea class="form-control" ng-model="question.answer_choice_1"></textarea>
<label class="checkbox-inline">
<input type="radio" name="correct" ng-model="question.correct_1" />
Correct
</label>
<div ng-repeat="choice in answer_choices">
<textarea class="form-control" ng-model="question.answers.$index[answer]">
</textarea>
<label class="checkbox-inline">
<input type="radio" name="correct" ng-model = "question.answers.$index[correct]" />
</label>
</div>
<button class='btn btn-primary' type="submit">Submit</button>
</form>
<button class="btn btn-default" ng-click="addAnswerChoice()">Add Answer</button>
</div>
I want to do something like when i add a new answer choice a new empty object is pushed in the question.answers array and this objects first key answer hold the value of question field and second key ` like
question.answers=[
{'answer':'',correct:''},
{'answer':'',correct:''},
{'answer':'',correct:''},
{'answer':'',correct:''},
]
Suggest me how can i do this . There is only one error that using $index i am unable to assign value to the array object at the same index in question.answers array.
Or if there is any other better way suggest me.
Help will be appreciated.
You are making just a small mistake. Correct your syntaxes and it will work fine
replace your ng-repeat div with this code
<div ng-repeat="choice in choices">
<label class="checkbox-inline"> Choice</label>
<textarea class="form-control" ng-model="question.answers[$index].answer">
</textarea>
<label class="checkbox-inline">
<input type="radio" name="correct" ng-model="question.answers[$index].correct_answer" value="1" />
Correct
</label>
</div>
And assign values to the radio buttons or these will not show in your object.