We Keep Coding

Angular: Get ng-model by ng-attr-id?

Is there a way to get ng-model value by ng-attr-id ?
I'm making a Comment/Reply box and I would like to get the value of the current reply.
Here is my html--
<div class="comments-list" ng-show="CommentsLoaded">
<ul>
<li ng-repeat="comment in comments">
<div>
{{comment.content}}
</div>
<div ng-click="showReply(comment.id)">
Reply
</div>
<div ng-class="hideReply" ng-attr-id="{{'reply-'+comment.id}}">
<textarea ng-model="replytxt" ng-attr-id="{{'replytxt-'comment.id}}"></textarea>
<div class="form-group">
<button type="button" ng-click="sendReply(comment.id)">
Publier
</button>
</div>
</div>
</li>
</ul>
</div>
Here is the angularjs--
$scope.sendReply = function(commentId){
var elm = document.getElementById('replytxt-'+commentId);
console.log(elm);
}
The above function show this in console:
<textarea ng-model="replytxt" ng-attr-id="{{'replytxt-'+comment.id}}" class="ng-pristine ng-valid ng-touched" id="replytxt-31"></textarea>

You don't need to retrieve element value by its selector. Do pass replytxt value inside sendReply function itself on click.
ng-click="sendReply(comment.id, replytxt)"
$scope.sendReply = function(commentId, replytxt){
Suggestion: rather than having replytxt there independently as ng-model, you can put it on comment level property like comment.replytxt, so that you don't need to take care of passing replytxt value separately to server.
ng-click="sendReply(comment)"
Code
$scope.sendReply = function(comment){
console.log(comment.id, comment.replytxt);
}

Jquery does not set text box value

I am trying to set the value of a text box when file upload is selected , how ever it does not happen but I see correct value in alert box.
<div class="row">
<div class="col-xs-2">
<div class="file-label"><i></i>#Resources.FolderPath</div>
</div>
<div class="col-xs-4">
<input class=".form-control" name="fileText" type="text" />
<div class="fileUpload btn btn-primary">
<span>Browse</span>
<input type="file" name="File" id="fileUpload" class="upload"/>
</div>
</div>
<div class="col-xs-4">
<label id="fileSizeError" style="color: red"></label>
</div>
</div>
$(document).ready(function () {
$(document)
.on("change","#fileUpload",
function (e) {
alert($("#fileUpload").val());
$("#fileText").val($("#fileUpload").val());
alert("hi");
});
});
Please help me here.I am using Asp.net MVC as platform.

Your input has a name, but #fileText is an ID selector. Either add an id to it, or use an attribute selector to find it.
So either:
<input class=".form-control" id="fileText" name="fileText" type="text" />
<!-- add id------------------^^^^^^^^^^^^^ -->
or
$("[name=fileText]").val($("#fileUpload").val());
// ^^^^^^^^^^^^^^^---- use attribute selector

Try native js:
document.getElementById("fileText").defaultValue = $("#fileUpload").val();
OR
$("#fileText").attr("value", "some value");
Also;
Check to see if your original code works with replacing .val() with .text

jQuery select element and next together

I have an auto-generated HTML and I want to group together elements.
Input Html:
<div class="editor-label"><label for="StringField">StringField</label></div>
<div class="editor-field"><input id="StringField" type="text" value="" /></div>
<div class="editor-label"><label for="IntField">IntField</label></div>
<div class="editor-field"><input id="IntField" name="IntField" type="number" value="0" /></div>
<!-- more like above -->
Desired output:
<div class="form-group">
<div class="editor-label"><label for="StringField">StringField</label></div>
<div class="editor-field"><input id="StringField" type="text" value="" /></div>
</div>
<div class="form-group">
<div class="editor-label"><label for="IntField">IntField</label></div>
<div class="editor-field"><input id="IntField" name="IntField" type="number" value="0" /></div>
</div>
I'm trying to use jQuery's next selector to get those groups, and then wrap them, but I'm having trouble getting the items to select as one to use with wrap(). I'm not sure if I can write a single selector to get this, or if I will need to do it iteratively. Here are some of the selectors I've tried.
//selects just the labels
$('.editor-label')
//returns only the .editor-fields
$('.editor-label + .editor-field')
//returns all 4 elements separately
$('.editor-label, .editor-label + .editor-field')
What selector can I use to select the element (.editor-label) and it's next (.editor-field) as one "element"?

You are going to need to do the selection in a for each and not with a selector by itself.
$(".editor-label").each(function() {
var lab = $(this);
var inp = $(lab).next();
lab.add(inp).wrapAll('<div class="wrapper"/>');
});
.wrapper { border: 2px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="editor-label"><label for="StringField">StringField</label></div>
<div class="editor-field"><input id="StringField" type="text" value="" /></div>
<div class="editor-label"><label for="IntField">IntField</label></div>
<div class="editor-field"><input id="IntField" name="IntField" type="number" value="0" /></div>

Try this
$('.editor-label').each(function(){
var group = $(this).next().addBack().wrapAll('<div class="form-group"></div>');
});

Use .each(), .addBack() and .wrapAll()
jsBin demo
$('.editor-label').each(function(){
$(this).next(".editor-field").addBack().wrapAll("<div class='form-group'/>");
});
.each() will target all the desired elements, inside the callback, find the .next(".editor-field"), addBack the starting selector (the current .editor-label) and wrapAll() inside the desired element

You can use the jQuery siblings method:
$(".editor-label").siblings(".editor-label")

See if this will work.
var fields = $('.editor-field');
$.each(fields, function(index, obj){
var field = $(obj);
var label = field.prev('.editor-label');
field.wrap('<div class='form-group'></div>').before(label);
});

using a function to write the input of a text field to the document when all forms are submitted

<script src="jquery.js"></script>
<script>
function saveScore (score) {
score=document.input.$('.inputright').value
$('submit').click(function(event) {
$('<div>')
.append(score)
.appendTo('.wincolumn');
});
}
</script>
</head>
<body>
<form name= "myform">
<input class="inputright" type="text" value="Team?" onfocus='value=""' onblur="value='Team?'" onclick="saveScore(score)">
</form>
<div id="bottomcontainer">
<div class="personalcolumns" id="niccolumn">
<div class="playername"> Nic Meiring </div>
<div class="wincolumn WLRcolumn"> </div>
<div class="losscolumn WLRcolumn"> </div>
<div class="resultcolumn WLRcolumn"> </div>
</div>
</body>
I want to take the input in the text field called Team? and write it to the column with the class .teamcolumn
2 main problems(I think)
allowing the text field to have a default value of "Team?" but then switching its value to the input when the onclick method is called (and therefore the function is called)
how to best write to the document from within that function. document.writeln() maybe?
Thanks

I created a demo for you at jsFiddle. The input field defaults to "Team?" if no text is entered, however if text is entered then it is not changed. If the input field loses focus and it is empty, it returns to "Team?". Once the field is blurred the value (if not "Team?") is then appended to the .wincolumn div. I removed your savescore function and all your inline event handlers.
jQuery:
$('input[name="foo"]').change(function() {
$('div.wincolumn').html($(this).val());
}).focus(function() {
if ($(this).val() == 'Team?') {
$(this).val('');
}
}).blur(function() {
if (!$(this).val()) {
$(this).val('Team?');
}
})
HTML:
<form name= "myform">
<input name="foo" class="inputright" type="text" value="Team?">
</form>
<div id="bottomcontainer">
<div class="personalcolumns" id="niccolumn">
<div class="playername"> Nic Meiring </div>
<div class="wincolumn WLRcolumn"> </div>
<div class="losscolumn WLRcolumn"> </div>
<div class="resultcolumn WLRcolumn"> </div>
</div>
</div>

traversing this with jquery gives me undefined

When I click .getdata, I want to go from .getdata to name=top and read the value of whichever option is selected (in this case it's 0), but I'm having a hard time getting to it. I keep getting undefined.
This is my html. The div class="main" repeats so I can't simply select input[name=top]. It would have to be through traversing the tree to the closest input[name=top]. Can someone get this right? I'm starting to think it's a browser error because I tried different options and all give me undefined.
<div class="main">
<div class="branch">
<div class="element">
<label>top color:</label>
<input type="radio" value="1" name="top">black
<input type="radio" value="0" name="top" checked="checked">white
<input type="radio" value="null" name="top">transparent
</div>
</div>
<div class="controls">
<a class="getdata">get data</a>
</div>
</div>
<div class="main">
....
</div>

$('a.getdata').click(function() {
var val = $(this).closest('.main').find('input[name="top"]:checked').val();
});
Place a click()(docs) event on the <a> element
On a click, use the closest()(docs) method to traverse up to the .main element
Then use the find()(docs) method along with the the attribute-equals-selector(docs) and the checked-selector(docs) to get the checked name="top" radio.
Finally use the val()(docs) method to get its value.

$(".getdata").click(function(){
selectedValue=$(this).parent().prev().children().children("input[name=top]:checked").val();
console.log(selectedValue);
});