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.
Related
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>
If zipcode is empty then form is invalid so button is disabled but if zipcode is 2 digits error message is showing but form is showing as valid in controller. If zipcode is empty then I need to disable button but I'm checking form valid or not but dont worry about ng-disabled. I just need solution for showing the "div" if and only if form is valid.
function submitUserDetail (formValid) {
if(formValid) {
$scope.showDiv = true;
}
}
<div class="">
<div class="">
<label required>
Zip code required
</label>
<label pattern>
Invalid Zip code
</label>
</div>
<div class="">
<input type="tel" maxlength="5" class="" name="zip5"
ng-model="userDetail.zipCode" required=""
pattern="^\d{5}$"
data-validate-on-blur="true" value=""
size="5">
<span class="" title="Reset" onclick="jQuery(this).prev('input').val('').trigger('change');"></span>
</div>
</div>
<div class="">
<div class="">
<div class="">
<span class=""></span>
<button class="" href="#" id="button" ng-click="submitUserDetail(form.$valid)" ng-disabled="form.$invalid">See section</button>
<span class=""></span>
</div>
</div>
</div>
<div ng-if="showDiv">
.......
</div>
Thanks in advance.
I assume that you have a <form> wrapping the HTML provided.
If so, you should make sure your <form> tag has novalidate applied so you're using AngularJS form validation and not HTML5 form validation:
<form name="form" ng-submit="submitUserDetail(form.$valid)" novalidate>
Also, it looks like you're mixing HTML5 validation attributes with AngularJS validation attributes. You should be using ng-required and ng-pattern instead of required and pattern.
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 iterate the radio buttons using ng-repeat. All the radio buttons are visible perfectly with first radio button checked, but when I try to select the other radio buttons, radio buttons are not clickable. can anybody please help me out what I am missing here..!!
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4" name="optionsRadiosA" value="option4" checked="">
<label class="form-label" for="rb4">{{n}}</label>
</div>
</div>
</div>
corrected html
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4_{{n}}" name="optionsRadiosA" value="{{n}}" checked="">
<label class="form-label" for="rb4_{{n}}">{{n}}</label>
</div>
</div>
</div>
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4_{{$index}}" name="optionsRadiosA" ng-model="radioVal[$index]">
<label class="form-label" for="rb4_{{$index}}">{{n}}</label>
</div>
</div>
</div>
I have added ng-model="radioVal_{{$index}}" in each of input iteration, why because it's ng-model who will contain current ng-value of your radio buttons. Try it, and get back to me.
and Id's are dynamically generated now.
Working Now!!!!!!
You need to fix the following issues:
The model must exist in parent scope. To do this, use ngInit to initialize an ngModel outside of your ngRepeat: ng-init="selected = { number:0 }"
All radio button controls must bind to the same ngModel. Add an ngModel to your input control, and bind it to the ngModel that you declared in parent scope: ng-model="selected.number"
Display different values for each radio button: value="{{n}}"
NOTE: Remember, ngRepeat creates a child scope for each iteration.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="selected = { number:0 }">
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" ng-model="selected.number" type="radio" value="{{n}}">
<label class="form-label" for="rb4">{{n}}</label>
</div>
</div>
</div>
{{ selected }}
</div>
You should have different ng-model for each radio element, you could do it by using ng-model="radio[$index]"
Markup
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4-{{$index}}" name="optionsRadiosA" ng-value="option4" ng-model="radioVal">
<label class="form-label" for="rb4">{{n}}</label>
</div>
</div>
</div>
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.