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='';
}
Related
I have one div which contains multiple types of input types. i.e., text, radio, checkbox...
I want to make the div mandatory. That means If I check the radio or check box or enter a value into the text field the mandatory condition satisfies. i.e, selecting any one of them satisfies the condition. If all are left without any value I must display angular messages(ng-messages) below the div.
This code is generated dynamically from Javascript. So validations should be done when I submit the form.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div id="div1"><!--This div is mandatory-->
<input type="checkbox" name="div1" value="SomeValue" ng-model="vm.check1">Some<br/>
<input type="checkbox" name="div1" value="SomeValue2" ng-model="vm.check2">Some2<br/>
<input type="radio" name="div1" value="Male">Male<br/>
<input type="radio" name="div1" value="Female">Female<br/>
<input type="text" name="div1" ng-model="text1"><br/>
</div>
<div></div><!--Should display ng-messages here if none of the above selected.-->
<br/><br/>
<div id="div2"><!--This div is mandatory-->
<input type="checkbox" name="div2" value="SomeValue" ng-model="vm.check3">Some<br/>
<input type="checkbox" name="div2" value="SomeValue2" ng-model="vm.check4">Some2<br/>
</div>
<div></div><!--Should display ng-messages here if none of the above selected.-->
is there any possibility to achieve this?
Yes, you could do that just by wrapping all group of input fields under fieldset and then apply required attribute over that fieldset.
Make sure name attribute of each field should be different in order to consider each field as different. It can be same name for gender radio button.
<!--Below field input fields are mandatory now-->
<fieldset id="div1" required="">
<input type="checkbox" name="check1" value="SomeValue" ng-model="vm.check1">Some<br/>
<input type="checkbox" name="check2" value="SomeValue2" ng-model="vm.check2">Some2<br/>
<input type="radio" name="gender" value="Male">Male<br/>
<input type="radio" name="gender" value="Female">Female<br/>
<input type="text" name="text1" ng-model="text1"><br/>
</fieldset>
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 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">
I am trying to show/hide and adjust the ng-required status if a checkbox is checked, but it doesn't seem to managing the variables properly. Here my examples:
<input type="checkbox" ng-model="checkboxdmodel.value" ng-true-value="'YES'" ng-false-value="'NO'">
Input that I want required unless the checkbox is checked in which case it should be hidden and not required:
<div class="form-group" ng-hide="checked.YES">
<label class="col-sm-3 control-label" for="inputamount">
<font color="red">*</font>Expense Amount</label>
<div class="col-sm-8">
<input type="number" class="form-control" id="inputamount" data-ng-model="itemamount" step="any" ng-required="checked.NO"/>
</div>
</div>
http://plnkr.co/edit/F4hdqWwhIWiqvsJl5ETx?p=preview
No need for the ng-true and ng-false.
Because checked and unchecked states of the checkbox evaluate to truthy or untruthy, you can just drop the checkbox ng-model value right into wherever you want. In the case of the ng-required, just invert the value with !.