Im trying to hide some div if the checkbox is checked. When the box is checked is adds the md-checked class so i need to see if that is true and then hide the class notifications, is this the right approach ? Thank you
<div layout="row" layout-align="center center" layout-margin layout-fill class="confirm">
<md-checkbox ng-if="md-checked ? true : ????? " ng-model="" aria-label="">
</md-checkbox>
</div>
<div class="notification">
<lib-notification text="{{error}}" type="danger" ng-if="error">
</lib-notification>
</div>
You need to set the ng-model for your checkbox and use it to determine if you should show the div
<input type="checkbox" ng-model="myCheckbox" aria-label="">
<div ng-hide="myCheckbox">Hide when checked!</div>
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.
The code is
<div _ngcontent-pvu-c241="" class="col-sm-6 col-md-4 col-lg-3">
<ng-select _ngcontent-pvu-c241="" name="customer_invitation_status" class="form-ng-select ng-select-clearable ng-select ng-select-single ng-pristine ng-valid ng-touched ng-select-bottom">
<div class="ng-select-container">
<div class="ng-value-container">
<div class="ng-placeholder">Customer Invitation</div>
<!----><!---->
<div role="combobox" aria-haspopup="listbox" class="ng-input" aria-expanded="false"><input aria-autocomplete="list" type="text" autocorrect="off" autocapitalize="off" autocomplete="a19ee7afde6a" readonly=""></div>
</div>
<!----><!----><span class="ng-arrow-wrapper"><span class="ng-arrow"></span></span>
</div>
<!---->
</ng-select>
</div>
When a person clicks on the div with a role of combobox, it adds this to the above HTML in addition to adding some cosmetic classes as well.
<ng-dropdown-panel role="listbox" aria-label="Options list" class="ng-dropdown-panel ng-select-bottom" id="a19ee7afde6a" style="opacity: 1;">
<!---->
<div class="ng-dropdown-panel-items scroll-host">
<div></div>
<div>
<div class="ng-option ng-option-marked" role="option" aria-selected="false" id="a19ee7afde6a-0">
<!----><span class="ng-option-label">Reservation Sent</span><!---->
</div>
<div class="ng-option" role="option" aria-selected="false" id="a19ee7afde6a-1">
<!----><span class="ng-option-label">Reservation Not Sent</span><!---->
</div>
<!----><!----><!----><!----><!----><!---->
</div>
</div>
<!---->
</ng-dropdown-panel>
I noticed that using .click! does absolutely nothing, but using
execute_script("arguments[0].click(), dropdown)
where dropdown can be obtained by grabbing the element with the name 'customer_invitation_status' or the element with the text 'Customer Invitation' inside of it.
DOES do something, but only after the Watir script crashes (The click happens after the script ends as opposed to during). While it's running, I'm not able to find the new elements: aka the span/element with the text, 'Reservation Not Sent' or ID of 'a19ee7afde6a-1' that should show up as as result of the click.
After the script crashes due to not being able to click on the span with the text 'Reservation Not Sent' because it doesn't exist, the click happens.
I'm having a form with a text box and a checkbox. Checkbox is mutually exclusive. I want to pass the selected value when click submit button. Only the email value is getting and checkbox value is not getting. I'm totally new to Angular JS. Please help to fix this. This is what I tried
<ng-form name="manageForm">
<md-input-container class="md-block">
<label>E-mail</label>
<input required md-asterisk name="email" ng-model="manage.model.email">
</md-input-container>
<div ng-repeat="designation in $manageController.designations">
<md-checkbox ng-model="designation.checked" ng-change="$manageController.change(designation)">
{{ designation.name }}
</md-checkbox>
</div>
<div>
<md-button class="md-raised md-primary bm-button" ng-disabled="manageUsersForm.$invalid || manageUsersForm.$pristine" ng-click= "$manageController.submitUser(manage.email,designation.checked)">Submit</md-button>
</div>
Controller function
this.submitUser = function (email, designation) {
console.log(email, designation)
}
Change the way you are implementing checkbox
Use ng-checked instead of ng-model
<div ng-repeat="designation in $manageController.designations">
<md-checkbox ng-checked="designation.checked" ng-change="$manageController.change(designation)">
{{ designation.name }}
</md-checkbox>
I have a small search bar which is hidden initally. With a ng-click i set "filter.show" to true and the searchbar becomes visible. As soon as this happens i want the text input inside to be focused automatically.
I'm using Angular 1.5 and Angular Material and found the focus-me option as presented below. But this doesn't work somehow and I don't understand what's the problem. Maybe someone can help me.
The html presented below uses the same controller for the button and the input.
<md-toolbar class="md-table-toolbar md-default" ng-show="filter.show && !selected.length" aria-hidden="false">
<div class="md-toolbar-tools">
<md-icon md-svg-icon="magnify"></md-icon>
<form flex="" name="filter.form">
<md-input-container class="md-block" flex="" style="margin-bottom:0">
<label>Search</label>
<input type="text" focus-me="filter.show" ng-model="query.filter" ng-model-options="filter.options" aria-invalid="false">
</md-input-container>
</form>
<button class="md-icon-button md-button md-ink-ripple" type="button" ng-click="removeFilter()">
<md-icon md-svg-icon="close"></md-icon>
<div class="md-ripple-container"></div>
</button>
</div>
</md-toolbar>
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.