ionic3: How to get the dropdow's selected value (in a list) while clicking an another button in same row
up vote
0
down vote
favorite
I'm creating a shopping cart list using ionic3 (for web). The design is as follows:
Please find the Screenshot here
And what I've achieved is as follows (code):
<ion-row *ngFor="let course_schedules of courseDetails.course_schedules;let i= index" >
<ion-col col-2 class="tables">{{course_schedules.schedule_course}}</ion-col>
// Dropdown
<ion-col *ngIf="course_schedules.schedule_islesson;" col-3 class="tables">
<select>
<option *ngFor="let schedule_lessons of course_schedules.schedule_lessons;let j= index" value="{{schedule_lessons.lessons}}-{{schedule_lessons.price}}">{{schedule_lessons.lessons}} Lessons (€ {{schedule_lessons.price}}/Lesson)</option>
</select>
</ion-col>
<ion-col col-2 class="tables">{{ course_schedules.schedule_start }}</ion-col>
<ion-col col-2 class="tables">{{ course_schedules.schedule_end }}</ion-col>
<ion-col col-3 style="display:inline-flex" align="right">
<button ion-button color="secondary" class="menuButton" (click)="addToCart()">Add to cart</button>
</ion-col>
Question: I'm able to create the UI, and change and read the values on selection/value change of the drop-down. But how can I get the dropdown's selected value while clicking the 'Add to cart' button? Could you please suggest a solution?
angular ionic3
add a comment |
up vote
0
down vote
favorite
I'm creating a shopping cart list using ionic3 (for web). The design is as follows:
Please find the Screenshot here
And what I've achieved is as follows (code):
<ion-row *ngFor="let course_schedules of courseDetails.course_schedules;let i= index" >
<ion-col col-2 class="tables">{{course_schedules.schedule_course}}</ion-col>
// Dropdown
<ion-col *ngIf="course_schedules.schedule_islesson;" col-3 class="tables">
<select>
<option *ngFor="let schedule_lessons of course_schedules.schedule_lessons;let j= index" value="{{schedule_lessons.lessons}}-{{schedule_lessons.price}}">{{schedule_lessons.lessons}} Lessons (€ {{schedule_lessons.price}}/Lesson)</option>
</select>
</ion-col>
<ion-col col-2 class="tables">{{ course_schedules.schedule_start }}</ion-col>
<ion-col col-2 class="tables">{{ course_schedules.schedule_end }}</ion-col>
<ion-col col-3 style="display:inline-flex" align="right">
<button ion-button color="secondary" class="menuButton" (click)="addToCart()">Add to cart</button>
</ion-col>
Question: I'm able to create the UI, and change and read the values on selection/value change of the drop-down. But how can I get the dropdown's selected value while clicking the 'Add to cart' button? Could you please suggest a solution?
angular ionic3
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I'm creating a shopping cart list using ionic3 (for web). The design is as follows:
Please find the Screenshot here
And what I've achieved is as follows (code):
<ion-row *ngFor="let course_schedules of courseDetails.course_schedules;let i= index" >
<ion-col col-2 class="tables">{{course_schedules.schedule_course}}</ion-col>
// Dropdown
<ion-col *ngIf="course_schedules.schedule_islesson;" col-3 class="tables">
<select>
<option *ngFor="let schedule_lessons of course_schedules.schedule_lessons;let j= index" value="{{schedule_lessons.lessons}}-{{schedule_lessons.price}}">{{schedule_lessons.lessons}} Lessons (€ {{schedule_lessons.price}}/Lesson)</option>
</select>
</ion-col>
<ion-col col-2 class="tables">{{ course_schedules.schedule_start }}</ion-col>
<ion-col col-2 class="tables">{{ course_schedules.schedule_end }}</ion-col>
<ion-col col-3 style="display:inline-flex" align="right">
<button ion-button color="secondary" class="menuButton" (click)="addToCart()">Add to cart</button>
</ion-col>
Question: I'm able to create the UI, and change and read the values on selection/value change of the drop-down. But how can I get the dropdown's selected value while clicking the 'Add to cart' button? Could you please suggest a solution?
angular ionic3
I'm creating a shopping cart list using ionic3 (for web). The design is as follows:
Please find the Screenshot here
And what I've achieved is as follows (code):
<ion-row *ngFor="let course_schedules of courseDetails.course_schedules;let i= index" >
<ion-col col-2 class="tables">{{course_schedules.schedule_course}}</ion-col>
// Dropdown
<ion-col *ngIf="course_schedules.schedule_islesson;" col-3 class="tables">
<select>
<option *ngFor="let schedule_lessons of course_schedules.schedule_lessons;let j= index" value="{{schedule_lessons.lessons}}-{{schedule_lessons.price}}">{{schedule_lessons.lessons}} Lessons (€ {{schedule_lessons.price}}/Lesson)</option>
</select>
</ion-col>
<ion-col col-2 class="tables">{{ course_schedules.schedule_start }}</ion-col>
<ion-col col-2 class="tables">{{ course_schedules.schedule_end }}</ion-col>
<ion-col col-3 style="display:inline-flex" align="right">
<button ion-button color="secondary" class="menuButton" (click)="addToCart()">Add to cart</button>
</ion-col>
Question: I'm able to create the UI, and change and read the values on selection/value change of the drop-down. But how can I get the dropdown's selected value while clicking the 'Add to cart' button? Could you please suggest a solution?
angular ionic3
angular ionic3
asked Nov 19 at 9:22
Sanal S
11
11
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
0
down vote
You can bind the value of the select to an property of your model.
So add for example the property selectedValue to your model and bind the select to it. Then you can access the value in your button with course_schedules.selectedValue:
<select [(ngModel)]="course_schedules.selectedValue">
<option *ngFor="let schedule_lessons of course_schedules.schedule_lessons;let j= index" value="{{schedule_lessons.lessons}}-{{schedule_lessons.price}}">{{schedule_lessons.lessons}} Lessons (€ {{schedule_lessons.price}}/Lesson)</option>
</select>
<button ion-button color="secondary" class="menuButton" (click)="addToCart(course_schedules.selectedValue)">Add to cart</button>
add a comment |
up vote
-1
down vote
accepted
Finally i solved this by using the following code:
In HTML:-
<select id="my-input-{{i}}">
<option *ngFor="let schedule_lessons of course_schedules.schedule_lessons;let j= index" value="{{schedule_lessons.lessons}}-{{schedule_lessons.price}}">{{schedule_lessons.lessons}} Lessons (€ {{schedule_lessons.price}}/Lesson)</option>
</select>
In .ts file:-
inputElement: any;
addToCart(i){
this.inputElement = document.getElementById("my-input-"+i);
alert(this.inputElement.value);
}
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
You can bind the value of the select to an property of your model.
So add for example the property selectedValue to your model and bind the select to it. Then you can access the value in your button with course_schedules.selectedValue:
<select [(ngModel)]="course_schedules.selectedValue">
<option *ngFor="let schedule_lessons of course_schedules.schedule_lessons;let j= index" value="{{schedule_lessons.lessons}}-{{schedule_lessons.price}}">{{schedule_lessons.lessons}} Lessons (€ {{schedule_lessons.price}}/Lesson)</option>
</select>
<button ion-button color="secondary" class="menuButton" (click)="addToCart(course_schedules.selectedValue)">Add to cart</button>
add a comment |
up vote
0
down vote
You can bind the value of the select to an property of your model.
So add for example the property selectedValue to your model and bind the select to it. Then you can access the value in your button with course_schedules.selectedValue:
<select [(ngModel)]="course_schedules.selectedValue">
<option *ngFor="let schedule_lessons of course_schedules.schedule_lessons;let j= index" value="{{schedule_lessons.lessons}}-{{schedule_lessons.price}}">{{schedule_lessons.lessons}} Lessons (€ {{schedule_lessons.price}}/Lesson)</option>
</select>
<button ion-button color="secondary" class="menuButton" (click)="addToCart(course_schedules.selectedValue)">Add to cart</button>
add a comment |
up vote
0
down vote
up vote
0
down vote
You can bind the value of the select to an property of your model.
So add for example the property selectedValue to your model and bind the select to it. Then you can access the value in your button with course_schedules.selectedValue:
<select [(ngModel)]="course_schedules.selectedValue">
<option *ngFor="let schedule_lessons of course_schedules.schedule_lessons;let j= index" value="{{schedule_lessons.lessons}}-{{schedule_lessons.price}}">{{schedule_lessons.lessons}} Lessons (€ {{schedule_lessons.price}}/Lesson)</option>
</select>
<button ion-button color="secondary" class="menuButton" (click)="addToCart(course_schedules.selectedValue)">Add to cart</button>
You can bind the value of the select to an property of your model.
So add for example the property selectedValue to your model and bind the select to it. Then you can access the value in your button with course_schedules.selectedValue:
<select [(ngModel)]="course_schedules.selectedValue">
<option *ngFor="let schedule_lessons of course_schedules.schedule_lessons;let j= index" value="{{schedule_lessons.lessons}}-{{schedule_lessons.price}}">{{schedule_lessons.lessons}} Lessons (€ {{schedule_lessons.price}}/Lesson)</option>
</select>
<button ion-button color="secondary" class="menuButton" (click)="addToCart(course_schedules.selectedValue)">Add to cart</button>
answered Nov 19 at 9:40
yannick
33913
33913
add a comment |
add a comment |
up vote
-1
down vote
accepted
Finally i solved this by using the following code:
In HTML:-
<select id="my-input-{{i}}">
<option *ngFor="let schedule_lessons of course_schedules.schedule_lessons;let j= index" value="{{schedule_lessons.lessons}}-{{schedule_lessons.price}}">{{schedule_lessons.lessons}} Lessons (€ {{schedule_lessons.price}}/Lesson)</option>
</select>
In .ts file:-
inputElement: any;
addToCart(i){
this.inputElement = document.getElementById("my-input-"+i);
alert(this.inputElement.value);
}
add a comment |
up vote
-1
down vote
accepted
Finally i solved this by using the following code:
In HTML:-
<select id="my-input-{{i}}">
<option *ngFor="let schedule_lessons of course_schedules.schedule_lessons;let j= index" value="{{schedule_lessons.lessons}}-{{schedule_lessons.price}}">{{schedule_lessons.lessons}} Lessons (€ {{schedule_lessons.price}}/Lesson)</option>
</select>
In .ts file:-
inputElement: any;
addToCart(i){
this.inputElement = document.getElementById("my-input-"+i);
alert(this.inputElement.value);
}
add a comment |
up vote
-1
down vote
accepted
up vote
-1
down vote
accepted
Finally i solved this by using the following code:
In HTML:-
<select id="my-input-{{i}}">
<option *ngFor="let schedule_lessons of course_schedules.schedule_lessons;let j= index" value="{{schedule_lessons.lessons}}-{{schedule_lessons.price}}">{{schedule_lessons.lessons}} Lessons (€ {{schedule_lessons.price}}/Lesson)</option>
</select>
In .ts file:-
inputElement: any;
addToCart(i){
this.inputElement = document.getElementById("my-input-"+i);
alert(this.inputElement.value);
}
Finally i solved this by using the following code:
In HTML:-
<select id="my-input-{{i}}">
<option *ngFor="let schedule_lessons of course_schedules.schedule_lessons;let j= index" value="{{schedule_lessons.lessons}}-{{schedule_lessons.price}}">{{schedule_lessons.lessons}} Lessons (€ {{schedule_lessons.price}}/Lesson)</option>
</select>
In .ts file:-
inputElement: any;
addToCart(i){
this.inputElement = document.getElementById("my-input-"+i);
alert(this.inputElement.value);
}
answered Nov 19 at 11:08
Sanal S
11
11
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53371559%2fionic3-how-to-get-the-dropdows-selected-value-in-a-list-while-clicking-an-an%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown