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

jQuery Tabs: doesn't work (doesn't change page)
Save form data using AJAX to PHP
Change the default browser behaviour of interpreting script tag
How to append elements to the parent elements extracted by getElementsByClassName?
Threejs: Visible light for spotlight
Google analytics, _gaq.push(callback), the callback is never executed
Multiselect Dropdown using Bootstrap 3 and AngularJS?
sliding more than 1 img at one time using animate
Uncaught type mismatch error: the type of an object was incompatible with the expected type of the parameter associated to the object
Fix iframe height after multiple submits
Calling functions in nested observablearrays (knockout.js)
Understanding closures in JavaScript [duplicate]
Store state of a JavaScript Object
javascript continue doesn't advance 'for in' iterator?
Store raphael svg in javascript variable
Websocket server on subdomain only

Categories

HOME
sockets
jhipster
sublimetext2
apache-zookeeper
termios
connectivity
multi-tenant
metadata
lookup
allure
deployit
overpass-api
youtube-data-api
tm
android-contentprovider
unique
cytoscape
yahoo-api
rocket.chat
polynomial-math
ion
hsm
safari-extension
labview
abstract-algebra
create-react-app
harmon.ie
intel-edison
vora
android-proguard
minio
username
parseint
gxt
pso
magnify
boost-statechart
pci-e
nustache
duplicity
w3c-validation
url-rewrite-module
ca
parameterized-query
gimpfu
presentationml
restify
abstraction
smack
netbeans-8.1
clojure-core.logic
epic
facebook-like
rotateanimation
google-document-viewer
business-basic
mappings
logiql
point-in-polygon
skydrive
dbflow
locomotivecms
biztalk-services
sicp
prism-6
drupal-forms
subtraction
django-select-related
banner-ads
nxc
text-based
cocos2d-html5
js-beautify
ios8.3
keyboard-hook
mean-square-error
leksah
wsdl2java
versions-maven-plugin
jrockit
paymill
dalvik
visual-studio-setup
kruskals-algorithm
page-title
regasm
gwt-platform
tweak
flatiron.js
multibyte
fastcgi++
apn
skinning
whiptail
strong-typing
sigint
sp-send-dbmail
windows-phone-7.8
state-diagram
managed
uiapplication
rup
flowlayoutpanel
guidance-automation-tool
hdrimages

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App