javascript


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


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.
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';
}
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

Related Links

How to add links to an Essential Grid in WordPress?
Trim function is not working as expected
HTML:Highlight selected link or label
Documentation for Protractor test cases
React bundle.js error syntax?
mutli level expand collapse with ajax data response
Does chaining sort and reduce increase time complexity from O(n) to O(n ^ 2)?
Display in tree structure by parsing object with string issue [closed]
Javascript - cookies, is there a way to write a cookie for all browser at once?
How can I make dependent variables respond and update in HTML/javascript?
How to get string from API depending on another string in same section?
Can't change text in js , class text
Undefined index when do AJAX request in jQuery?
Docker for Windows REST API - enable CROSS
How does this code actually work (coverts exponentials into real numbers)?
Array with unique values: indexOf vs new Set

Categories

HOME
chef
libsvm
jwt
hosting
hash
postfix-mta
datagridview
drm
sentiment-analysis
eclipse-che
docker-machine
visual-studio-lightswitch
vi
upgrade
prototype
diff
binary-search-tree
config
mean.io
mpeg-dash
hmail-server
angular-moment
tcpdump
microsoft-project-vba
openjpa
intel-edison
wrap
dita
view-helpers
information-gain
products
pci-e
adobe-edge
agens-graph
google-analytics-filters
ca
2d-games
sleep
spring-rabbit
goclipse
google-maps-direction-api
occi
semantic-mediawiki
data-integrity
delphi-xe6
bbdb
java-api
dev-to-production
data-link-layer
apache-cordova
google-eclipse-plugin
intranet
pem
mappings
euler-angles
log4php
scandir
destructor
payflowpro
paradigms
banner-ads
nitrous
indexoutofboundsexception
.net-2.0
gauge
samsung-galaxy-gear
json2csharp
pkcs#12
microsoft-ajax-minifier
maintainability
jrockit
outbound
outlook-2007
p4v
mobile-devices
real-time-java
sharepointfoundation2010
ubifs
elevated-privileges
webmatrix-2
sp-send-dbmail
native-methods
appearance
scraper
countdownlatch
ef4-code-only
moonlight
ironjs
partcover
papervision3d
ie7.js
google-gears
rdbms-agnostic

Resources

Database Users
RDBMS discuss
Database Dev&Adm
javascript
java
csharp
php
android
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App