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!
Related
i have html content like below,
<div role="row" data-testid="table-row-0">
<div role="cell">
<input data-testid="table-row-checkbox" type="checkbox" checked> //uncheck this checkbox
<label></label>
</div>
<div role="cell">name1</div> //find by this name1
<div role="cell">type1</div>
</div>
<div role="row" data-testid="table-row-1">
<div role="cell">
<input data-testid="table-row-checkbox" type="checkbox" checked>
<label></label>
</div>
<div role="cell">name2</div>
<div role="cell">type2</div>
</div>
as seen from above, i want to uncheck the checkbox for the div with name1. how can i do it using cypress.
Use the uncheck method:
cy.contains('name1').parent().find('input').uncheck()
Alternative way to get the correct input.
cy.contains('[data-testid^=table-row-]','name1')
.find('[data-testid=table-row-checkbox]')
.uncheck()
Here is working example.
I'm new to Angular JS so mind my mistakes. I am trying to assign a value to an ng-model through dynamically created radio buttons. So far, this is what I have:
<div data-ng-init="radio=['Core','Software Development','Systsmes Analysis','All']">
<div data-ng-repeat="r in radio">
<div class="form-check">
<input class="form-check-input" type="radio" data-ng-model="types" data-ng-value="types='{{r}}'" name="type" id="{{r}}">
<label class="form-check-label" for="{{r}}">
{{r}}
</label>
</div>
</div>
<p>You chose {{types}}</p>
</div>
I am able to output the radio buttons as seen here:
But I am unable to output the selected radio buttons value.
What I want achieve is something like this:
Where the selected radio button's value pop's up in "You have chosen x".
Any help is much appreciated. Thank you for reading.
You need to use an object with dot notation:
angular.module("myApp", [])
.controller("myCtrl", function($scope) {
$scope.radio = { type: '' }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-init="radio=['Core','Software Development','Systems Analysis','All']">
<div ng-repeat="r in radio">
<div class="form-check">
<input class="form-check-input" id="{{r}}" type="radio" ng-model="radio.type" ng-value="'{{r}}'" name="type">
<label class="form-check-label" for="{{r}}">{{r}}</label>
</div>
</div>
<p>You chose {{radio.type}}</p>
</div>
</div>
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='';
}
On my page, I have dynamically created radio buttons. I want to change wrapper background color when radio button is selected.
following is my code
<section ng-repeat="list in myList">
<div class="radioWrapper">
<input type="radio" name="{{list.category}}" ng-model="list.name">
<label>{{list.name}} </label>
</div>
</section>
I want to add "selectedRadioBg" class at the radioWrapper when each radio is selected.
Appreciate any help
<section ng-repeat="list in myList">
<div ng-class="myClass">
<input type="radio" name="{{list.category}}" ng-model="list.name">
<label>{{list.name}} </label>
</div>
</section>
// in controller/link
if($scope.list.name){
$scope.myClass = {background: #B250C2};
}
See: ngClass
What's happening
You got a ngModel list.name on your radio button. If the radio is checked, it's value evaluates to true
You watch for $scope.list.name to be true, and if so, set an object named myClass to your scope, which contains the styles. This object is bound to your markup:
<div ng-class="myClass">
You can make use of the ng-class directive. Documentation can be found here.
This directive allows you to conditionally apply a class based on an expression, in this case the radio button selection.
So, using your example, you can have the following code:
<div class="radioWrapper" ng-class="{'selectedRadioBg': list.name}>
<input type="radio" name="{{list.category}}" ng-model="list.name">
<label>{{list.name}} </label>
</div>
list.name acts as a truthy / falsy expression here.
<section ng-repeat="list in myList">
<div class="radioWrapper" ng-class="{'selectedRadioBg': list.name}>
<input type="radio" name="{{list.category}}" ng-model="list.name">
<label>{{list.name}} </label>
</div>
</section>
Replace with
<section ng-repeat="list in myList">
<div class="radioWrapper" style="background: {{list.name}} none repeat scroll 0% 0%;">
<input type="radio" name="{{list.category}}" ng-model="list.model">
<label>{{list.name}} </label>
</div>
</section>
**Do not put your list.name in ng-model directive.