Is this possible?
My table is like this:
[ ] Address string 1
[ ] Address string 2
...
The markup:
<td>
<div>
<input class="hb-checkbox type="checkbox" id="byggSkjemaliste-element0-0-adresse-skjema-element-0">
<div class="hb-label" data-e2e-selector="byggSkjemaliste-element0-0-adresse-skjema-element-0hb-checkbox-label">
<label for="byggSkjemaliste-element0-0-adresse-skjema-element-0" id="byggSkjemaliste-element0-0-adresse-skjema-element-0-label"></label>
</div>
</div>
</td>
<td>
Address string"
</td>
A'd like to be able to find "Address string 1" in the table, then click the checkbox in the to the left of that
Since I don't have control over the complex dynamic selectors created, it's very complex to try and use those when the table gets bigger, and when there are multiple tables on the page. Also, I'd like a more elegant way to select the checkbox in a specific row.
If you want to follow the DOM layout, use navigation commands like .prev() of which the docs say
Get the immediately preceding sibling of each element in a set of the elements.
cy.contains('td', 'Address string 1') // the cell containg the text you're looking for
.prev('td') // previous sibling cell (td)
.find('input') // pick the input within that cell
.check();
The above is a first-stab based on the DOM structure, but I prefer the following Cypress commands (for simplicity, possibly more robust)
cy.contains('tr', 'Address string 1') // the row containing the address
// looks in all children of tr,
// so finds the label 4 levels down
.find('input') // pick the input within that row
.check();
Related
How to set many dropdown fields using array in Angular. Also, when choose an option from one dropdown field will not another field and the selected option to be shown on it's input box.
I tried a lot to achieve it, but not luck. I have also attached the code. Please review it & fix it if you have better understanding.
https://stackblitz.com/edit/angular-qfpxmy?file=src%2Fapp%2Fapp.component.ts
you has errors in your code, the idea is show/change filter.formField[ind]. So you should use [ngModel]="filter.formFiend[ind] instead [(ngModel)]="filter.formField" (it's innecesary use the "bannana notation" or (NgModelChange) because you change the value when click the options.
<div class="row" *ngFor="let item of dropdownsArr; let ind = index;">
...
<!--the [(NgModel)]="filter.formField" becomes like-->
<input ...[ngModel]="filter.formField[ind]"
(click)="dropdownFieldStatus(ind, $event)">
<ul class="dropdown filter-priority open" *ngIf="showDropDown[ind]">
...
</ul>
</div>
Futhermore, your function onSelectOption should give value to this.filter.formField[ind]
onSelectOption(ind: number, index: number, bugClass: any): void {
this.selectedOptionIndex[ind] = index;
this.filter.formField[ind] = bugClass.title;
}
Please click on the demo below
www.jsfiddle.net/rnnb32rm/1370
My problem is: "Add input" is working fine. But whenever i invoke "Add
Fields", the subsequent field will be sync with the first one. I want
the subsequent to be filled with only one input. I am currently using 2 array choices and choices2.
that is because you are bingding them with the same $scope.choices. I would recommend you to assign the $scope.choices into $scope.choices2 so that they will become specific fields.
$scope.choices2 = [
{
id: 'choice1',
choices: [{id: 'choice1'}]
}
];
and at inner ng-repeat, bind the fields with $scope.choices2.choices
<div data-ng-repeat="choice in choice.choices ">
refer this example.
fixed example.
I need to display the next field in my form depending on the last value selected in the form. All fields in my form are independent views, specifically are ng-include.
The idea is not to show all fields when the page loads, and instead, show the next field according to the value selected in the previous field.
Example 1:
My first input (my first ng-include) is a text field, maybe on trigger onBlur check if the value is correct and then show the next field (my second ng-include), then, if that value is correct and then show the next field (my third ng-include).
Example 2:
This time my first input (my first ng-include) is a checkbox field, maybe on trigger onBlur check if the value is correct and then show the next field (my second ng-include), then, if that value is correct and then show the next field (my third ng-include).
Thanks.
Are you familiar with ng-show?
- It shows or hide element depended on value which you declare in ng-show tag.
You can wrap each field (or a group of fields) in ng-form and show the next section depending on the validity of the form of the current section. The fact that elements of the form are delivered via ng-include has little bearing on the approach:
<div ng-form="form1">
<input ng-model="v.one" required min-length="3">
</div>
<div ng-form="form2" ng-show="form1.$valid && !form1.$pending">
<input ng-model="v.two" required min-length="3">
</div>
<div ng-form="form3" ng-show="form2.$valid && !form2.$pending">
<input ng-model="v.three" required>
</div>
This is, of course, at a high-level, and doesn't deal with cases where previous becomes invalid while the next form is showing. For those, more complicated, cases it is better to do the logic in the controller and expose the decision via a function or a scope variable, e.g. showForm2():
<div ng-form="form2" ng-show="showForm2()">
<input ng-model="v.two" required min-length="3">
</div>
In my controller:
$scope.mytest = [1,2,3];
My view:
<div ng-repeat="foo in mytest">
{{foo}}
<input type="text" ng-model="mytest[$index]" name="$index" />
</div>
{{ mytest | json }}
When I load the page it renders this:
I can change the value, and the binding updates all the values:
The only problem, is the form field loses focus. When ng-model updates the scope's values, it causes ng-repeat to manipulate the dom, and the fields lose focus after each key press. I have to click back inside the field between each keypress to enter a value with length more than 1 character.
What I'm trying to accomplish here is to render a text field for each value of an array. Updating the text field should update the scope values, and also update all places I'm displaying those values within the view, both inside & outside of the ng-repeat
Figured it out. I changed my array to be an array of objects with IDs:
$scope.mytest = [{id:1, title:'one'}, {id:2, title:'two'}];
Then I prevented ng-repeat from removing & re-inserting a dom node when it changes:
<div ng-repeat="foo in mytest track by foo.id">
My previous attempt from the original post fails. In this example illustrating why, you can see that Angular can't discern what changes were made:
[1,2,3] // point A
[2,2,3] // point B
Angular has no way of knowing what took place to get from point A to B. Did I edit the first value? Remove it & and insert a new value? Make multiple edits that cancel each other out?
In this example, Angular is able to discern what happened to get from Point A to B:
$scope.mytest = [{id:1, title:'one'}, {id:2, title:'two'}]; // point A
$scope.mytest = [{id:1, title:'two'}, {id:2, title:'two'}]; // point B
In this example I use the "value object" design pattern. I wrap my scalar values in an object which has an identifier that is immutable, while the wrapped value remains mutable.
Combined with the "track by" syntax of ng-repeat, it allows Angular to discern between an add & subsequent removal versus an edit. ng-repeat can then directly update the bindings in the isolate scope, as opposed to redrawing the whole darn page.
When the page is loaded the user is presented with a set of products, then if he/she clicks a button more products are fetched and appended to the list. I am trying to find an Angular way to put a row to separate the products that were already loaded from the recently appended. I don't want to manipulate the DOM directly and I can't push an empty row to the array of products because the length of the array is used somewhere else.
How could I do this?
Here is a basic Bin
If you don't want a divider after the last item, just use:
<... ng-repeat="...">
<hr ng-show="!$last" />
...
</...>
$last is true if the repeated element is last in the iterator.
I think you'll need to keep track of this yourself, in another $scope (array) property. In your ng-repeat loop, check to see if $index is in this array. If so, add/show the <hr>.
<... ng-repeat="...">
<span ng-show="showHr($index)"><hr></span>
...
</...>
Function showHr() should return true when you want to display an <hr>.
You could also use ng-switch instead of ng-show.