We Keep Coding

ngModel is reflecting to all textareas

I have multiple textareas (looping with ngFor and adding new divs with textareas inside). What i need is for every textarea to have separate ngModel and i don't want to directly bind this to property from object in dataArray - for example:
[(ngModel)]='data.note' or [(ngModel)]='data.feedback' .
This works but I don't have feedback property in dataArray so it won't for work for second textarea.
For example with my current implementation change in one textarea is reflecting in all other textareas. I tried with index approach but getting error:
ERROR TypeError: Cannot read property '1' of undefined
<div *ngFor="let data of dataArray; let index=index;trackBy:trackByIndex;">
<div class="card-body">
<form class="form">
<div class="form-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<textarea name="note" [(ngModel)]='selectedNote' class="form-control"
rows="2"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea name="feedback" [(ngModel)]='selectedFeedback' class="form-control" rows="4"></textarea>
</div>
</div>
</div>
</div>
</form>
</div>
With current code if i add some text in first textarea with name 'note' that change is reflected for all textareas with name 'note'. As mentioned tried with adding
[(ngModel)]='selectedFeedback[index]' but i am getting error.
Also tried with giving different names to textareas:
<textarea name="note{{index}}" [(ngModel)]='dataArray[index]' rows="2"></textarea> OR
<textarea name="note{{index}}" [(ngModel)]='selectedNote' rows="2"></textarea>
but change is reflecting for each textarea again.

You can try it with any array, I am using data(n) function to return an Array of length n. In this example it's just for iteration
<div *ngFor="let item of data(8); let i = index">
<textarea [(ngModel)]='values[i]'></textarea>
</div>
// To reflect changes
<div *ngFor="let item of data(8); let i = index">
<div>{{ values[i] }}</div>
</div>
With TS
export class AppComponent {
values = [];
data(n) {
return Array(n);
}
}
Working example in Stackblitz.com

ngModel binds with the name property. So if you want to use multiple textarea try using different name attribute. You can iterate over like -
<ng-container *ngIf="let data of dataArray; index as i">
<textarea name="feedback_{{i}}" [(ngModel)]='selectedFeedback' class="form-control" rows="4"></textarea>
</ng-container>

How to pass a value to "data-value"

I have website: http://thanglongvn.com with this in my webpage
I have a label on the same web page. I would like the "data-value" to get the value from the label value instead of hardcode value.
How to do that? How I can pass a value programmically to "data-value" and define the html mark-up as blank like this:
<div class="counter-animated" data-value="span dynamic value here"></div>
<span id="my_IDLabel">dynamic value</span>

You can access data attributes using plain javascript as element.dataset.datasetname
In this case,it is element.dataset.value,you can set it as element.dataset.value="class1"
check this snippet
window.onload = function() {
var counterClass = document.querySelectorAll('.counter-animated');
alert(counterClass[0].dataset.value);
counterClass[0].dataset.value="class1";
}
<div class="counter-animated" data-value="span dynamic value here"></div>
<span id="my_IDLabel">dynamic value</span>
Hope it helps

You can set a data attribute programatically like so
var label = document.querySelector('.value')
var target = document.querySelector('.target')
var output = document.querySelector('.output')
output.innerHTML = target.getAttribute('data-value')
document
.querySelector('button')
.addEventListener('click', function() {
target.setAttribute('data-value', label.textContent)
output.innerHTML = target.getAttribute('data-value')
})
<label class="value">Bar</label>
<div class="target" data-value="Foo"></div>
<br/>
<button>change data-value attribute</button>
<br/><br/>
The data-value attribute is:
<br/>
<div class="output"></div>

Using ng-repeat to iterate through an object with song names as indices

I have an object that I created using song names so I could dynamically add and keep track of occurrences of songs in a series of playlists.
Here is an example:
{tracks: Object} 1,2,3 - Remix: Object
trackAlbum: "Greatest Hits"
trackCount: 1
trackImage:https://i.scdn.co/image/26b654ecbe60b28397e6d8b5d829cebeeeb5590a"
trackName: "1,2,3 - Remix"
What I would like to do, is in the html, use ng-repeat to order each song by the trackCount (highest to lowest), and have it display in a list.
Here is the current code:
<div ng-app="myApp" ng-controller="myCtrl">
<form id = "playlistSearch" name="playlistForm">
<div class="form-group">
<label>Spotify playlist search:</label>
<input name = "search" ng-minlength = 3 placeholder = "Enter your search.." ng-model = "playlist" class = "form-control" required></input>
<p class = "help-block" ng-show = "playlistForm.search.$error.minlength">Enter 3+ characters</p>
</div>
<div class = "form-group">
<button ng-disabled = "playlistForm.search.$invalid" class = "btn btn-primary" ng-click = "getPlaylists()" type = "submit">Submit</button>
</div>
</form>
<div class = "container-fixed, results">
<ol>
<li ng-repeat = "track in allTracks | orderBy: 'trackCount'"> {{allTracks.trackName}} {{allTracks.trackAlbum}} {{allTracks.trackCount}}</li>
</ol>
</div>

Your html is not properly structured, you should close li tag and then use track instead of allTracks inside the ng-repeat div, that will provide you the access over the each element of allTracks object.
Code
<ol>
<li ng-repeat = "track in allTracks | orderBy: 'trackCount'">
{{track.trackName}} {{track.trackAlbum}} {{track.trackCount}}
</li>
</ol>

Change the value of xforms element via javascript?

I was wondering if it's possible to change the value of an xforms element via javascript and then submit the form with that value?
what i have tried is change the text of an xforms:input when an <input type="file"> is triggered and it works, the thing is that when i submit the form, the xforms:input doesn't seem to apply the value
<div id="ubi" class="controls">
<xf:input ref="ubicacion"/>
<input class="input-file" id="fileadjunto" type="file" onchange="uploadfile()"/>
</div>
<script>
function uploadfile()
{{
var inp = document.getElementById('fileadjunto');
var name = inp.files.item(0).name;
var span1 = document.getElementById('ubi').getElementsByTagName('span')[0].getElementsByTagName('span')[0].getElementsByTagName('input')[0];
span1.value = name;
}};
</script>
why am i getting the spans and inputs? if you check the xforms:input element in the console you'll see that it's converted to
<span .....>
<span.....>
<input..../>
</span>
</span>

Troubles transferring data from text box to Firebase and displaying that data

I have created two pages, one with a text box to input data that should be stored in Firebase and another that should display that stored data, but i am having issues with some of the data not being stored, and none of the data being displayed on the second page. The HTML for the text box is as follows:
<form>
<div class="post-title">
<input type="text" placeholder="Post Title">
</div>
<div class="post-content">
<textarea type="text" placeholder="Post Content"></textarea>
</div>
<button type="submit" class="submit">Submit</button>
</form>
The HTML for the page that should display the data is:
<div class="result">
<h4 class="postTitle">Paragraph 1</h4>
<p class="postContent">Welcome to my test blog. This is a paragraph.</p>
<div class="postDate">
<p>Date of post: </p>
<p class="postDate2">date</p>
</div>
</div>
The javascript that should transfer data from the text box to my Firebase :
var url = "https://blog-posts.firebaseio.com/";
var firebaseRef = new Firebase(url);
function funct1(event)
{
var title = $("#post-title").text();
var post = $("#post-content").text();
var date = Date();
firebaseRef.push({Title: title, Content: post, Date: date});
event.preventDefault();
}
var submit = document.getElementsByTagName('button')[0];
submit.onclick = funct1;
And the javascript that should retrieve data from my Firebase and display it (Note, both javascript extracts are from the same .js file, i seperated them for readability):
firebaseRef.on('child_added', function(snapshot) {
var message = snapshot.val();
});
$("postTitle").replaceWith(title);
$("postContent").replaceWith(post);
$("postDate2").replaceWith(date);
The Date/Time seems to copy to my Firebase, but if i enter something in either text box and click submit, the data is not stored in my Firebase. Also nothing including the Date/Time is being changed on the page that should display the data.

I think your issue may be fairly straight forward here.
Update your form HTML to this -
<form>
<div class="post-title">
<input id="post-title" type="text" placeholder="Post Title">
</div>
<div class="post-content">
<textarea id="post-content" type="text" placeholder="Post Content"></textarea>
</div>
<button type="submit" class="submit">Submit</button>
</form>
Where you have the following -
var title = $("#post-title").text();
var post = $("#post-content").text();
change to
var title = $("#post-title").val();
var post = $("#post-content").val();
It looks as though you are new to jquery as well, so you may want to also read this to help you understand how to get values, and work with selectors, etc.
Hope this helps!