I am trying to get a group of checkboxes by the name attribute. For example, I have the following:
<input name="labs[]" type="checkbox" value="lab1" />
<input name="labs[]" type="checkbox" value="lab2" />
<input name="labs[]" type="checkbox" value="lab3" />
<input name="labs[]" type="checkbox" value="lab4" />
And Im trying to get that group by doing something like:
Ext.query('input[name=labs[]]');
But that clearly doesn't work because of the square brackets that are part of the name. I'm lost as to how to do this?
You could do a "starts with" match instead:
Ext.query('input[name^=labs]');
This will not work very well if you have other elements that start with "labs" though, so you may want to add another identifier to your "labs[]" name, i.e. "labs-check[]".
Try matching an input element that has a name attribute that starts with 'labs':
Ext.query("input[name^=labs]");
Related
So I am trying to select an element using their placeholder like this:
fireEvent.focus(screen.getByPlaceholderText('DD/MM/YYYY'));
And this is giving me an error saying it found multiple elements with the said placeholder. Here are the matching elements.:
<input
class="StyledInput"
hasvalue=""
label="Date of birth"
placeholder="DD/MM/YYYY"
tabindex="0"
value=""
variant=""
/>
<input
class="StyledInput"
hasvalue=""
label="Expiry date"
placeholder="DD/MM/YYYY"
tabindex="0"
value=""
variant=""
/>
It's returning me two elements but I only want to select the first one. How can I get that specific element?
You should use the getAllByPlaceholderText method, otherwise, you will get an error:
TestingLibraryElementError: Found multiple elements with the placeholder text of: DD/MM/YYYY
The return value of const inputs = screen.getAllByPlaceholderText('DD/MM/YYYY') is an element list, you can get the first input element by array index - inputs[0]
I have an array like this:
var data = [{
"chamberName": "Community App",
"representativeEmail": "some#email.com",
"primaryColor": "#325490",
}]
And an input on a form like this:
<input type="text" class="form-control" id="chamberName" ng-change="" placeholder="Chamber Name">
I'd like to use ng-change to change the array value that matches the changing input value. I can't figure out how to get the input value though. I am thinking something like:
ng-change="data[0].chamberName = inputValue";
Any help would be great!
SIDE NOTE: You need to use $parent when using ng-include.
You need to use ngModel.
Why your original data in array?
If you need to edit only one instance it is simpler to use object and pass object's property to ngModel
<input .. data-ng-model="data.chamberName" .. />
Or if you are going to edit pool of objects, than you can surround it with ngRepeat
<fieldset data-ng-repeat="elm in data">
<input .. data-ng-model="elm.chamberName" .. />
..
</fieldset>
Or if you still want to store your single object in array
<input .. data-ng-model="data[0].chamberName" .. />
I'm working on an Angular2 project & currently i'm stuck with a Quizz module, so illustrating the problem ; when a candidate wants to pass a test he will get that test with some questions ; every question has 4 propositions with radio buttons and he should answer merely by checking one of them for every question. here is the HTML snippet of what i'm talking about :
<div *ngFor="#qt of listQuestion">
<h3 class="uk-accordion-title" >{{qt.wordingQ}}</h3>
<div class="uk-accordion-content">
<input type="radio" id="radio_demo_1" />
<label for="radio_demo_1"> <b>{{qt.lpo[0]}}</b></label> <br><br>
<input type="radio" id="radio_demo_2" />
<label for="radio_demo_2"><b>{{qt.lpo[1]}}</b></label><br><br>
<input type="radio" id="radio_demo_3" />
<label for="radio_demo_3"> <b>{{qt.lpo[2]}}</b></label> <br><br>
<input type="radio" id="radio_demo_4" />
<label for="radio_demo_4"><b>{{qt.lpo[3]}}</b></label>
</div> </div>
Where the listQuestion is a list of Question entities which each one of them has a wording and a list of propositions (lpo), in that way i cannot check only one radio button for every question as it is shown below :
I tried to remove the id in the <input> tags and it still the same problem , I've changed the id by name and give the same name for all tags thus, I could check only one proposition but when moving to another question and checking a new proposition , the first one will be cleared.
Any help Please ?
Your problem is that the way you currently do it, you have a single radio group for all questions. You can solve it by creating radio element name attributes dynamically. Something like this:
<h3 class="uk-accordion-title" >{{qt.id}}</h3>
<input type="radio" id="radio_demo_{{qt.id}}_{{index$}}" name="radio_demo_{{qt.id}}_{{index$}}" />
<label for="radio_demo_{{qt.id}}_{{index$}}"> <b>{{qt.lpo[0]}}</b></label> <br><br>
{{qt.id}} (or any other qt property that uniquely identifies the question) is the key here.
This way, you'll have a separate radio group for each question, because group names won't intersect.
I'm trying to configure the datepicker from angular-ui.bootstrap to have a starting point date when user pops up the datepicker.
I found out this line of code actually works.
$scope.date = new Date(1980-12-12);
It actually put the value at the input-box and also the picker. But I want my input-box to be empty initially. Instead I want the placeholder to be shown.
Please, try using the placeholder attribute.
Something like this
<input type="text" placeholder="{{date}}" ... />
Try to use placeholder attribute.
<input type="text" name="datepicker" placeholder="{{date}}" value="" ... />
I've been using the type ahead directive here which has been working great:
http://angular-ui.github.io/bootstrap/#/typeahead
My issue is, I've gone from a scenario where I'm using the entire object:
<input type="text" ng-model="MyPerson" typeahead="i as i.Name for i in PeopleSearch($viewValue)" />
To a scenario where I only want part of the object:
<input type="text" ng-model="MyPerson" typeahead="i.Id as i.Name for i in PeopleSearch($viewValue)" />
At this point, both the model and the textbox will contain the same thing, no matter what is entered for the 'as'. Can anyone explain why this is happening? It seems like the logic should mimic the expression for ng-options, but apparently that's not the case.
Here's a demo: http://plnkr.co/edit/5oqlldC3PltnrynqhnAU?p=preview
The textbox should contain the person's name after you select the item.
Here was my resolution in case anyone else runs into this:
<input type="text" ng-model="MySelectedPerson" typeahead="i as i.Name for i in PeopleSearch($viewValue)" typeahead-on-select="MyPerson = MySelectedPerson.Id" />