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?










share|improve this question


























    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?










    share|improve this question
























      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?










      share|improve this question













      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






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 19 at 9:22









      Sanal S

      11




      11
























          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>





          share|improve this answer




























            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);


            }






            share|improve this answer





















              Your Answer






              StackExchange.ifUsing("editor", function () {
              StackExchange.using("externalEditor", function () {
              StackExchange.using("snippets", function () {
              StackExchange.snippets.init();
              });
              });
              }, "code-snippets");

              StackExchange.ready(function() {
              var channelOptions = {
              tags: "".split(" "),
              id: "1"
              };
              initTagRenderer("".split(" "), "".split(" "), channelOptions);

              StackExchange.using("externalEditor", function() {
              // Have to fire editor after snippets, if snippets enabled
              if (StackExchange.settings.snippets.snippetsEnabled) {
              StackExchange.using("snippets", function() {
              createEditor();
              });
              }
              else {
              createEditor();
              }
              });

              function createEditor() {
              StackExchange.prepareEditor({
              heartbeatType: 'answer',
              convertImagesToLinks: true,
              noModals: true,
              showLowRepImageUploadWarning: true,
              reputationToPostImages: 10,
              bindNavPrevention: true,
              postfix: "",
              imageUploader: {
              brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
              contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
              allowUrls: true
              },
              onDemand: true,
              discardSelector: ".discard-answer"
              ,immediatelyShowMarkdownHelp:true
              });


              }
              });














              draft saved

              draft discarded


















              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

























              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>





              share|improve this answer

























                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>





                share|improve this answer























                  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>





                  share|improve this answer












                  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>






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 19 at 9:40









                  yannick

                  33913




                  33913
























                      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);


                      }






                      share|improve this answer

























                        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);


                        }






                        share|improve this answer























                          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);


                          }






                          share|improve this answer












                          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);


                          }







                          share|improve this answer












                          share|improve this answer



                          share|improve this answer










                          answered Nov 19 at 11:08









                          Sanal S

                          11




                          11






























                              draft saved

                              draft discarded




















































                              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.




                              draft saved


                              draft discarded














                              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





















































                              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







                              Popular posts from this blog

                              Costa Masnaga

                              Fotorealismo

                              Sidney Franklin