I am generating checkboxes trough ng-repeat , for all columns of some grid
<div ng-repeat="(key, val) in gridData[0]">
<!--<label>{{columnShowSelect[1].columnNumber}}</label>-->
<div class="section col-md-6">
<label>
<u>
<h5>{{key}}</h5>
</u>
</label>
</div>
<div class="section col-md-4">
<u>
<label class="block mt15 option option-primary">
<input type="checkbox" id="chbEnableCol" name="chbColumnName" value="{{$index+1}}" ng-checked="columnShowSelect[{{$index}}].columnNumber == {{$index+1}}" />
<span class="checkbox"></span>Enable this column</label></u>
</div>
</div>
I also want to check checkboxes which i have already decided to be checked , so i am getting json with columnNumbers , that is columnShowSelect.columnNumber ,but for some reason it doesnt check it , if i put {{columnShowSelect[$index].columnNumber}} and go inspect element of checkbox , i can clearly see that it says ng-checked= "1 == 1" , but checkbox is not checked , any help ?
You don't need {{}} in ng-checked because it takes JavaScript expression.
ng-checked="columnShowSelect[$index].columnNumber == $index+1"
Related
I have the following radiobuttons:
<div class="nextgen-goal-overall-radiobuttons pull-left">
<label class="nextgen-input-label">Overall Goal</label>
<div class="radio-button-item pull-left" *ngFor="let goalType of goalTypesRadioButton">
<p-radioButton class="nextgen-radio-button" name="{{goalType.id}}" value="{{goalType.id}}" label="{{goalType.description}}" [(ngModel)]="selectedGoalTypeId"></p-radioButton>
</div>
</div>
When I click on any radio button the selectedGoalTypeId is updated with the corresponding value.
My problem here is that on my HTML I have the following conditional divs:
<div class="nextgen-input-container nextgen-goal-input pull-left">
<span *ngIf="selectedGoalTypeId === 1" class="goals-currency-icon">{{currencyFormat}}</span>
<label class="nextgen-input-label nextgen-target-group-label">{{selectedGoalTypeId}}</label>
<input class="nextgen-input" [class.nextgen-input-budget] = "selectedGoalTypeId === 1" type="number" pInputText placeholder="">
</div>
<div *ngIf="selectedGoalTypeId === 3" class="nextgen-goal-frequency-dropdown pull-left">
<label class="nextgen-input-label nextgen-target-group-label">Frequency</label>
<p-dropdown [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'" dropdownIcon="fa fa-angle-down" class= "nextgen-dropdown" [options]="FrequencyLookup" [(ngModel)]="selectedFrequency" value="selectedFrequency"></p-dropdown>
</div>
Asking if selectedGoalTypeId is 1 or 3 it shows some divs or not.
The problem here is that the selectedGoalTypeId is updated correctly. I put some label on the HTML to check. But the divs are not changed according to the conditions it always displays the same despite of the value of selectedGoalTypeId. What I'm missing here?
In p-radioButton change value="{{goalType.id}}" to [value]="goalType.id"
And I suppose that *ngIf="selectedGoalTypeId === 1" should be placed on the upper div than on the span
Posted the solution Here
PS : I guess goalType.id and selectedGoalTypeId are both number
I am trying to reference a checkbox next to a label of a certain name containing an underscore.
An example DOM looks like
<div id="form-2143">
<div id="wrap-1353">
<label id="numberfield-1234-label">
<span class="x-form-label">admin_user </span>
</label>
<input type="checkbox" id="checkbox-1353"
class="form-field" componentid="cb1353">
</div>
...
</div>
The aim is to select the input element so I can click it in Selenium.
The below XPath to my understanding should work
//label[span[contains(string(),"admin_user")]]../input
The problem is that the above works but only with 'admin' not 'admin_user'.
Using just with 'admin' gets multiple results. I can only guess it is to do with the '_' though it could easily be a quirk with the site i am testing.
I also can't guarantee the order of the label and input, hence the go up then down
An underscore (_) requires no special provision in XPath (sub)string testing.
Given your HTML corrected to be well-formed,
<div id="form-2143">
<div id="wrap-1353">
<label id="numberfield-1234-label">
<span class="x-form-label">admin_user </span>
</label>
<input type="checkbox" id="checkbox-1353"
class="form-field" componentid="cb1353"/>
</div>
...
</div>
this XPath,
//div[label[contains(., 'admin_user')]]/input
selects the input element contained within the div that contains a label whose string value contains the substring admin_user.
You have forgotten to make level up again
//label//span[contains(text(),'admin_user')]/../../input
For example: with two examples of "admin_user" and "admin_test"
<div id="form-2143">
<div id="wrap-1353">
<label id="numberfield-1234-label">
<span class="x-form-label">admin_user</span>
</label>
<input type="checkbox" id="checkbox-1353" class="form-field" componentid="cb1353">
</div>
<label id="numberfield-1234-label">
<span class="x-form-label">admin_test</span>
</label>
<input type="checkbox" id="checkbox-1353" class="form-field" componentid="cb1353">
</div>
</div>
I have an angular 2 application, where i use a ngFor to handle an bunch of checkboxes. when i initialize this component i need to set the state of the checkbox based on weather an id excists in an array
<div *ngFor="let option of listOptionResponse.options" class="col-md-12">
<div class="col-lg-12">
{{option.headline}}
</div>
<div class="col-lg-2 col-md-2 ">
<input type="checkbox" class="form-control" (change)="ServiceAddOrRemove($event, option.id)" name="choose">
</div>
</div>
In the component i have an array and if the options.id exists in this array i wanna set it to true.
I cannot think of a good way to do this, and i have been looking for some sort of init event to use, bu without luck.
(this has nothing to do whith the excisting (change) event)
I hope you can help, and thanks in advance
You can just bind to checked like
<input type="checkbox" class="form-control" (change)="ServiceAddOrRemove($event, option.id)" name="choose"
[checked]="ids.indexOf(option.id) != -1">
Perhaps you could try this:
<input type="checkbox" [(ngModel)]="option.id" class="form-control" (change)="ServiceAddOrRemove($event, option.id)" name="choose">
This is my HTML code. It's a custom DropDownList that I made. Can someone advise how I could set one of the options to be checked by default in this case below?
<div class="dropdownlistheader" ng-click="toggle('subdiv','item')">
<input type="text" readonly="readonly" class="dropdownlistinput" value="{{selectedItemValuesDisplay}}" />
</div>
<div id="ddl123" ng-show="showItemOptions" class="dropdownlist">
<div ng-show="showItemOptions" ng-repeat="option in ItemTypeDDL">
<input type="checkbox" ng-model="selected[$index]" ng-click="toggleItemSelection(option.TypeID, option.TypeName)"> {{option.TypeName}}
</div>
</div>
Based on the limited details provided in the questions, I'll suggest the following:
<div id="ddl123" ng-show="showItemOptions" class="dropdownlist" ng-init="selected[0] = true">
<div ng-show="showItemOptions" ng-repeat="option in ItemTypeDDL">
<input type="checkbox" ng-model="selected[$index]" ng-click="toggleItemSelection(option.TypeID, option.TypeName)"> {{option.TypeName}}
</div>
</div>
The ngInit directive will select the first element in the selected flags list, by setting the first index of the array to true
I have the following html
<div class="row">
<div class="col-lg-6">
<label class="radio">
<input type="checkbox">
</label>
</div>
<div class="col-lg-1">
<input type="text" disabled="" class="col-lg-2 form-control" name="notes_33">
</div>
</div>
there is an on click event on the checkbox input in "col-lg-6" div, i want to get the value input text under "col-lg-1", here is my way to get it
$("#medication").on('click', ':checkbox', function(){
var $note = $(this).parent().parent().siblings('.col-lg-1').find(":text");
//... change the value of $note
});
is my way is good? is there any better way to traverse to the input filed starting from the check box?
This looks like simpler:
$(this).closest('.row').find(':text')
Edit:
Here is the comparisons between closest and parents:
http://jsperf.com/jquery-parents-vs-closest