I have 2 radio groups with 2 radio buttons each, age group (AG1, AG2) and language ("one language", "multilingual"). Depending on which radio button is checked, I want to fill a select box with different options. So there's 4 different combinations = 4 different sets of options (4 AngularJS scope properties). I got it to work with one radio group using ng-model, but I can't figure out how to do this with two. I tried using jQuery but it won't work, I've been told that I shouldn't mix AngularJS and jQuery.
HTML (ng-value is obviously wrong here, I don't know what to set as value)
<div class="form-check">
<input class="form-check-input" type="radio" name="AG" id="AG1" ng-model="values" ng-value="PD1E">
<label class="form-check-label" for="AG1">4 - 5 years</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="AG" id="AG2" ng-model="values" ng-value="PD2M">
<label class="form-check-label" for="AG2">6 - 7 years</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="language" id="one" ng-model="values" ng-value="PD1E">
<label class="form-check-label" for="one">one language</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="language" id="multi" ng-model="values" ng-value="PD1M">
<label class="form-check-label" for="multi">multilingual</label>
</div>
<br>
<select id="inputPD" class="form-control">
<option ng-repeat="x in values">{{x}}</option>
</select>
AngularJS scope properties
$scope.PD1E = [
"1-one", "0,3", "0,5", "0,8", "1,8", "5,9", "12,8", "32,2", "58,8", "81,6", "100,0"
];
$scope.PD2E = [
"2-one", "0,7", "0,9", "2,0", "7,9", "21,3", "41,5", "100,0"
];
$scope.PD1M = [
"1-multi", "2,1", "3,5", "5,6", "12,5", "19,4", "33,3", "48,6", "61,8", "82,6", "95,8", "100,0"
];
$scope.PD2M = [
"2-multi", "0,5", "2,2", "7,6", "23,8", "49,2", "70,3", "100,0"
];
So if I select AG1 + one, it should display PD1E in the select box.
AG2 + one = display PD2E
AG1 + multi = display PD1M
AG2 + multi = display PD2M
One approach is to use the ng-if directive with the options:
<select id="inputPD" ng-model="selectPD" class="form-control">
<option ng-repeat="x in PD1E" ng-if="radio1=='1' && radio2=='E'">{{x}}</option>
<option ng-repeat="x in PD2E" ng-if="radio1=='1' && radio2=='E'">{{x}}</option>
<option ng-repeat="x in PD1M" ng-if="radio1=='2' && radio2=='M'">{{x}}</option>
<option ng-repeat="x in PD2M" ng-if="radio1=='2' && radio2=='M'">{{x}}</option>
</select>
The <option> elements will only be added when the condition is true.
I am working on an AngularJS application. I am trying to create a page that allows the user to select one of three radio buttons. Two of the three also have checkboxes underneath them to allow the user to select additional options if they've selected the appropriate radio button. To try to prevent improper checkbox selections, I'm trying to set the ng-disabled attribute on the checkboxes. So far, it's not working, and I've tried several different iterations.
This is my HTML:
<div class="panel-body">
<input type="radio" id="notFraudulent" name="actionSelector" ng-model="cleared" /><label for="notFraudulentRadio"> Not Fraudulent</label><br />
<input type="checkbox" id="highVolumeCustomer" ng-model="highVolumeCustomer" ng-disabled="(fraudulent||cleared)" /><label for="highVolumeCustomer"> High Volume Customer</label><br />
<br/>
<input type="radio" id="appearsFraudulent" name="actionSelector" ng-model="fraudulent" /><label for="isFraudulentRadio"> Appears Fraudulent</label><br />
<input type="checkbox" id="reportAccount" ng-model="reportAccount" ng-disabled="(cleared||reviewed)" /><label for="reportAccount"> Report Account</label><br />
<br/>
<input type="radio" id="markReviewed" name="actionSelector" ng-model="reviewed" /><label for="markReviewed"> Mark As Reviewed For Later</label>
</div>
I have tried changing the operator on the ng-disabled expressions to &&, as I've seen some articles where it's suggested that the operators don't mean what one thinks they mean. But that doesn't work, and neither does it work if I put just a single condition in the expression. There isn't anything in the controller (yet) that tries to use or manipulate any of the ng-models in the HTML. I've come to the conclusion that there's something I'm missing with regard to the radio buttons, but I can't for the life of me figure out what.
Can anyone see what my mistake is?
you should use value property to bind special value for radio button, and when radiobutton's status is changed, the value will be kept at ng-model.
refer the code snippet below:
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.selectedValue = 'cleared';
$scope.cleared = false;
$scope.fraudulent = false;
$scope.reviewed = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="panel-body" ng-app='app' ng-controller="myCtrl">
<input type="radio" id="notFraudulentRadio" name="actionSelector" value="cleared" ng-model="selectedValue" /><label for="notFraudulentRadio"> Not Fraudulent</label><br />
<input type="checkbox" id="highVolumeCustomer" ng-model="highVolumeCustomer" ng-disabled="selectedValue === 'fraudulent' || selectedValue === 'cleared'" /><label for="highVolumeCustomer"> High Volume Customer</label><br />
<br/>
<input type="radio" id="isFraudulentRadio" name="actionSelector" value="fraudulent" ng-model="selectedValue"/><label for="isFraudulentRadio"> Appears Fraudulent</label><br />
<input type="checkbox" id="reportAccount" ng-model="reportAccount" ng-disabled="selectedValue === 'cleared' || selectedValue === 'reviewed'" /><label for="reportAccount"> Report Account</label><br />
<br/>
<input type="radio" id="markReviewed" name="actionSelector" value="reviewed" ng-model="selectedValue"/><label for="markReviewed"> Mark As Reviewed For Later</label>
<br>
cleared:{{cleared}}<br>
fraudulent:{{fraudulent}}<br>
reviewed:{{reviewed}}<br>
selectedValue: {{selectedValue}}
</div>
I have a condition where I need to display values depending on an if condition. Below is my template code.
Template:
<td>
<label>Review Title/Purpose*</label>
</td></br>
<div ng-if="title1 == true">
<td>
<input type="text" class="col-md-10" maxlength="256" ng-show="title1" ng-model="arform.revtitle"><required/>
</td></div>
<div ng-if="title1 != true">
<td><input type="text" class="col-md-10" maxlength="256" ng-show="!title1" ng-init="'{{reviewtit}}'" ng-model="arform.revtitle"><required/>
</td></div>
The value in ng-init="'{{reviewtit}}'" is the value I get from Views. Where as the value in ng-show="title1" is the value I get from controller.
I just wanted to know is it right to use ng-show in the different ways I mentioned?
i use ng-repeat as i populate the names
this is my view
<div ng-controller="user_tagging_ctl" ng-init="user_type='<?php if(isset($user_type))echo $user_type; else echo'all'; ?>';">
<input type="text" class="form-control" ng-model="user_srch" maxlength="35" placeholder="Project Manager" required>
<span class="user_tagging_container">
<ul>
<li ng-repeat="x in data | filter:user_srch | orderBy:['status','x.user_lname']" data-id="{{x.user_id}}">
<input type="checkbox" name="pm-group">
{{x.user_fname + ' ' + x.user_lname}}
</li>
</ul>
</span>
</div>
everytime i search using my textbox the checkbox button resets to false.
example: i check the name i want then try to search another name then if i clear the textbox, all checkbox are now false/not checked.
how can i preserved the checked ones and make them at the orders first those are checked?
Bind to ng-model:
<input type="checkbox" name="pm-group" ng-model="x.selected">
See how to order
I have an ng-repeat which I am using to repeat my JSON data to create Yes/No radio button group on a set of questions.
My $scope.RadioData has the following JSON data:
{
QuestionCd: "Q1"
QuestionTxt: "Some text for the question 1."
ResponseInd: ""
},
{
QuestionCd: "Q2"
QuestionTxt: "Some text for the question 2."
ResponseInd: ""
},
{
QuestionCd: "Q3"
QuestionTxt: "Some text for the question 3."
ResponseInd: ""
},
{
QuestionCd: "Q4"
QuestionTxt: "Some text for the question 4."
ResponseInd: ""
},
{
QuestionCd: "Q5"
QuestionTxt: "Some text for the question 5."
ResponseInd: ""
}
And my HTML is as follows:
<div ng-repeat="radiodata in RadioData" ng-form="RadioForm">
<div class="form-group">
<label for="QuestionTxt" class="col-md-9 radio-inline">
{{radiodata.QuestionTxt}}
</label>
<div class="col-md-3">
<div ng-class="{ 'has-error' : RadioForm.{{radiodata.QuestionCd}}.$invalid }" class="has-error">
<label class="radio-inline">
<input type="radio" name="{{radiodata.QuestionCd}}"
value="T" ng-model="radiodata.ResponseInd" required/>
Yes
</label>
<label class="radio-inline">
<input type="radio" name="{{radiodata.QuestionCd}}"
value="F" ng-model="QuestionRemarksData.ResponseInd" required/>
No
</label>
<span ng-show="RadioForm.{{radiodata.QuestionCd}}.$invalid" class="help-block">Required Field !</span>
</div>
</div>
</div>
</div>
My rendered HTML looks like this:
Some text for the question 1. o Yes o No
Some text for the question 2. o Yes o No
Some text for the question 3. o Yes o No
Some text for the question 4. o Yes o No
Some text for the question 5. o Yes o No
[Submit Button]
I have added the 'required' attribute to each radio button, but I am not able to make these radio buttons behave as required. If I have radio group outside ng-repeat, the same code makes it required.
So, how to make these set of questions with radio groups required inside ng-repeat?
Did you try using ng-required="true" instead of the html5 required attribute?
<div ng-repeat="radiodata in RadioData" ng-form="RadioForm">
<div class="form-group">
<label for="QuestionTxt" class="col-md-9 radio-inline">
{{radiodata.QuestionTxt}}
</label>
<div class="col-md-3">
<div ng-class="{ 'has-error' : RadioForm.{{radiodata.QuestionCd}}.$invalid }" class="has-error">
<label class="radio-inline">
<input type="radio" name="{{radiodata.QuestionCd}}"
value="T" ng-model="radiodata.ResponseInd" ng-required="true"/>
Yes
</label>
<label class="radio-inline">
<input type="radio" name="{{radiodata.QuestionCd}}"
value="F" ng-model="QuestionRemarksData.ResponseInd" ng-required="true"/>
No
</label>
<span ng-show="RadioForm.{{radiodata.QuestionCd}}.$invalid" class="help-block">Required Field !</span>
</div>
</div>
</div>
</div>
Also, as a note, I seem to remember needing to add an ng-click to each option too, to prevent having to click the radio button twice to clear the error...
Having exactly the same problem, and kind of getting crazy with it, this is what I found (pretty new to angularjs so might be I'm making big mistakes):
After doing some tests found that
<span ng-show="RadioForm.{{radiodata.QuestionCd}}.$invalid"
class="help-block">Required Field !</span>
Is always hiding, tried to log to the console, RadioForm.{{radiodata.QuestionCd}}.$invalid and is telling me
$invalid not available in 'undefined'
So I guess the big problem here is how to ask for the 'component status' in the
radio form, seems they are not recognized simply by the name.
I took a look in JS debugger and a very strange thing appear in the radioForm element
it has a "{{radioData.QuestionCd}}" (written exactly that way) as a property, I
might be missing something important here (clearly don't understand this last thing)
Not of much help, but may be this gives some other clue to someone