How to get value/id of other elements when button clicked

Question

I made a simple application using angular2. In my application In a table some records are shown. When user selects any of the records then that particular field is editable and button shown next to it changes its title to 'Save' fro 'Delete'.

My Component HTMLs Code:

   <div class='row' *ngFor = 'let question of questionList; let i = index'>
     <div class='col-lg-1 col-xs-1'>

    </div>
    <div class='col-lg-10 col-xs-10'>
       <div class='row question-content-row'>
             <div class='col-lg-1  col-md-1 col-sm-1 col-xs-2'>
                <span>{{i+1}}</span>
            </div>
            <div class='col-lg-10  col-md-10 col-sm-9 col-xs-6'>
                <span class='questionLabel' contenteditable='true' (click)="userWnatsToEditQuestion($event.target)" (blur) = "editQuestionEnds($event.target)" >{{question.questionText}}</span>
            </div>
            <div class='col-lg-1  col-md-1 col-sm-2 col-xs-4'>
                 <button (click) = "deleteQuestion(question.id,i)" >{{actionButtonTitle}}</button>
            </div>
       </div>
    </div>
     <div class='col-lg-1 col-xs-1'>

    </div>
 </div>

Method's on my Component

  private deleteQuestion(questionId:String,index:Number)
   {
  console.log("question id to be deleted--"+questionId+"asd"+index);
   }

  private userWnatsToEditQuestion(element)
   {
    element.textContent = "Save";
   }

  private editQuestionEnds(element)
 {
    element.textContent = "Delete";
 }

I don't know how can I change the Text of particular button. And How can I get the text of particular span when user Clicks on Save button.

score 1 · Accepted Answer · answered May 16 '17 at 06:01

Code is attached below

Assuming questionList is:

 this.questionList = [{
    questionText: 'What?',
    btnTitle: 'Delete'
 }, {
    questionText: 'When?',
    btnTitle: 'Delete'
}]


 <div class='row' *ngFor = 'let question of questionList; let i = index'>
     <div class='col-lg-1 col-xs-1'>

    </div>
    <div class='col-lg-10 col-xs-10'>
       <div class='row question-content-row'>
             <div class='col-lg-1  col-md-1 col-sm-1 col-xs-2'>
                <span>{{i+1}}</span>
            </div>
            <div class='col-lg-10  col-md-10 col-sm-9 col-xs-6'>
                <div *ngIf="question.btnTitle === 'Save'">
                    <span (blur)="editQuestionEnds(i)">
                        <input type="text" [(ngModel)]="question.questionText" />
                    </span>
                </div>

                <div *ngIf="question.btnTitle === 'Delete'">
                    <span (click)="userWnatsToEditQuestion(i)">
                        {{question.questionText}}
                    </span>
                </div>

            </div>
            <div class='col-lg-1 col-md-1 col-sm-2 col-xs-4'>
                 <button (click)="deleteQuestion(i)" >{{question.btnTitle}}</button>
            </div>
       </div>
    </div>
     <div class='col-lg-1 col-xs-1'>

    </div>
 </div>


private deleteQuestion(index) {
    let quesObj = this.questionList[index];
    // here you can fetch questionText in quesObj ['questionText'] way
 }

 private userWnatsToEditQuestion(index) {
    this.questionList[index]['btnTitle'] = 'Save';
 }

 private editQuestionEnds(element) {
    this.questionList[index]['btnTitle'] = 'Delete';
 }

score 0 · Answer 2 · answered May 16 '17 at 06:22

0

Question List

  this.questionList=[{"id":1,"questionText":"what","action":"delete"},
 {"id":2,"questionText":"when","action":"delete"},
 {"id":3,"questionText":"how","action":"delete"}]

Here is the plunker

answered May 16 '17 at 06:22

Vikas Mahajan

345
1
7

How to get value/id of other elements when button clicked

2 Answers2