Develop Reference

AngularJS ng-repeat input

I am trying to make comments functionality using Angular js. The problem is that when i want to write a comment for a post, the text is also writing inside other input elements (comments). I write a text inside one input, but it writes it in all inputs
So for example same is happening with this code
<div class="comments" ng-repeat="articles in [1,2,[4,5,6]]">
<div ng-repeat="comments in articles">
<div>
<input type="text" ng-model="$parent.new">
</div>
</div>
if i use new instead of $parent.new i get undefined, but when i use $parent.new and i write in one input, it also writes in other inputs.

The issue is that you are assigning all of the inputs to the same model, so your inputs are all in sync with the same object.
What you need is to assign each input to a different model. I'm guessing you need these models to be dynamic, so you should use an array as your model and track your ng-repeat by $index like so:
<div ng-repeat="comments in articles track by $index">
<div>
<input type="text" ng-model="arr[$index]">
<span ng-if="arr[$index]">
{{arr[$index]}}
</span>
</div>
</div>
Now, in your controller, you can initialize the empty arr like so:
$scope.arr = [];
Now, your inputs will be in sync with $scope.arr depending on the index they were in.
Try out this jsfiddle for an example.

This is because you've giving same model (ng-model="$parent.new") for all of the inputs What you should do to avoid this problem is assign different model to each input element. Something like
<div class="comments" ng-repeat="articles in [1,2,[4,5,6]]">
<div ng-repeat="comments in articles">
<div>
<input type="text" ng-model="comments">
</div>
</div>

Change ng-model of input to
<input type="text" ng-model="comments.comment">

How can I preserve initial value using ngModel in angularJS

I'm trying to add a feature for in line editing.
Here's my html:
<div class="value" data-ng-repeat='value in aaVM.archValues'>
<div class="nameContainer">
<div class='name' data-ng-hide='editing' data-ng-click='editing = !editing'>
<span>{{value.name}}</span>
<div class="icon">
<md-icon class="mdIcon" md-svg-src="./resources/images/icons/edit.svg"></md-icon>
</div>
</div>
<form data-ng-submit='aaVM.updateName(value.name); editing= !editing' data-ng-show='editing'>
<input type="text" data-ng-model='value.name'>
<div class="cancel" data-ng-click='editing = !editing'>X</div>
<input type="submit">
</form>
</div>
</div>
Everything works. Here's the issue, because I'm using ng-model to bind the values name in the form, When I hit cancel, the ui will present the edited version of the input(assuming edits were made) despite hitting the cancel button.
I want the user to be able to edit freely, and upon hitting the cancel button, it revert the value back to the original value of value.name.
I could use a different variable, but I want the initial value of the input to be the value from the ng-repeat. Is there a way to temporarily clone the value and retrieve it later in the scope of an ng-repeat. Or any other work around to enable to cancel button in the way I've described? Thanks.

In Angular, Use directive ngModelOptions to change ng-model value on submit event and use $rollbackViewValue to roll back input original value
Try this:
<form data-ng-submit='aaVM.updateName(value.name); editing= !editing' data-ng-show='editing'>
<input type="text" ng-model-options="{ updateOn: 'submit' }" data-ng-model='value.name'>
<div class="cancel" data-ng-click="editing = !editing; value.name.$rollbackViewValue();">X</div>
<input type="submit">
</form>
Official Documentation for more information

Angular ngSwitch hiding label element?

I have some AngularJS code to dynamically create form elements based on an array with form details (input type, value, etc.)
Here's the example code I have for a text input:
<div ng-repeat="input in input_array">
<div ng-switch on="input.input_type">
<div ng-switch-when="text">
<label class="item item-input">
<input type="text" placeholder="Hello World">
</label>
</div>
</div>
</div>
As you can see, the top-level div is repeated for every form element in the array. The problem, is that when input.input_type equals "text", it doesn't show unless I remove the label tags! I've tried doing label tags without any attributes (<label>...</label>) and it still doesn't show the input unless I remove them.
This is pretty strange, does anyone have any ideas why it would do that? Thanks!
EDIT: Now I've tried removing the input and putting text in (<label>Hello!</label>), and it shows up.....so it just doesn't allow inputs wrapped in a label element? o.O

You need to close your input tag.
<div ng-repeat="input in input_array">
<div ng-switch on="input.input_type">
<div ng-switch-when="text">
<label class="item item-input">
<input type="text" placeholder="Hello World"/>
</label>
</div>
</div>
</div>

Get child input element value update

HTML code as follows:
<div id="input2" class="clonedInput">
<div class="col-sm-3 text_flied">
<div class="col-sm-4 no-padding">
<input type="" class="bwidth" value="" placeholder="300" name="fr_width[1]">
</div>
<div class="col-sm-1 text_middle no-padding">
<p>X</p>
</div>
<div class="col-sm-4 no-padding">
<input type="" class=" bheight" value="" placeholder="300" name="fr_height[1]">
</div>
</div>
</div>
I want to update the value of the input field fr_width[1]. This sections are dynamically created as fr_width[2], fr_width[3] and so on.
To update the value, I use the following code, but it is not working. I tried the children() option too.
$("#input2").siblings(".col-sm-4 input").val('123');
$("#input2").closest(".bwidth").val('123');
Both ways are not working.

Try DEMO :-
$("#input2").find(".text_flied").find(".bwidth").val('123');
OR
$("#input2").children(".text_flied").find(".bwidth").val('123');
OR
$("#input2").find(".bwidth").val('123');
OR
The shortest way you can go for
$("#input2 .bwidth").val('123');
1)- closest only works for ancestor or the selector itself .
2)- siblings only works for the same heirarchy nodes.
There are lots of ways you can find your required selector and set value to it .
Thanks !

You can simply use something like this. If you want to get specific item dynamically.
var itemIndex = 1;
$("input[name='fr_width["+itemIndex +"]']").val("123")

Please read the documentation on jQuery's siblings and closest.
Siblings is for getting the elements on the same DOM level as the selector, in this case #input2, and not its children
Closest is for getting the closest parent element of #input2, up in the DOM tree
What you want is simply:
$('#input2 input.bwidth').val('123')
to update the .bwidth input under #input2 only. If there are more, then $('input.bwidth').val('123') should update all inputs with the class name bwidth.
Here is a reference on how jQuery's selectors work.

Why so difficult? Just select all inputfields within div with id "input2". So you can choose the inputfield from the returned array.
Example:
$('#input2 input').eq(0).val("123");

Add Delete link / button to delete input field contents?

I am using an input form with multiple input fields.
These input fields can be pre-populated so I want to give the user an easy option of deleting then with a 'delete' link or button beside the field which deletes the full contents of that input field.
Pressing the delete button will also give them a text confirmation that it has been deleted.
I have attached a jpeg of what I am trying to do
I am using wordpress and gravity forms as my form builder. I am thinking maybe there is a jquery solution to do this but not sure how?
My code for one of my input fields is as follows, the inout fields on my form are all the same code but different id's of course so I did not want to paste everything here just 1 as an exmpale.
<li id="field_15_144" class="gfield">
<label class="gfield_label" for="input_15_144">List</label>
<div class="ginput_container">
<input id="input_15_144" class="medium" type="text" tabindex="40" value="" name="input_144">
</div>
// this would be the link to delete the contents of input field "input_15_144
Delete
</li>
Thanks for any help!

Here, I've added custom ids etc. for the fiddle. You can use it the way you like:
Older: jsFiddle - Lewdh
Edit
To meet newer requirements, some more edits were made.
jsFiddle - Lewdh/4/
HTML Code
<li id="field_15_144" class="gfield">
<label class="gfield_label" for="input_15_144">List</label>
<div class="ginput_container" id="inpContain">
<input id="input_15_144" class="medium" type="text" tabindex="40" value="http://jsfiddle.net/" name="input_144" />
<button value="delete">Delete</button><br />
</div>
</li>
<li id="field_15_145" class="gfield">
<label class="gfield_label" for="input_15_145">List</label>
<div class="ginput_container" id="inpContain">
<input id="input_15_145" class="medium" type="text" tabindex="40" value="http://jsfiddle.net/" name="input_145" />
<button value="delete">Delete</button><br />
</div>
</li>
jQuery Code
$(document).ready(function() {
$("li div button").on('click', function() {
$(this).prev("input").val('');
$(this).parent().append('<span style="color: green;">Success! Your link has been deleted.</span>');
});
});

HTML
<div class="ginput_container">
<input id="input_15_144" class="medium" type="text" tabindex="40" value="www.google.com" name="input_144">
delete <br/>
<span id="msg" style="color:green;"><span>
</div>
Jquery
$('a#delete').click(function(){
$('input#input_15_144').val('');
$('span#msg').html('deleted successfully');
});​
check the demo
You can do the styling as you want. I have created the simple eg which include the functionality you wanted. If you have any problems let me know.

jQuery's val() does what you need. In the above example you could use a function like this.
$('#input_15_144').val('');

Try this
$(function(){
$(".ginput_container").append('delete'); // append a delete link
$('#delete_link').click(function(){
$('#input_15_144').val(''); // set the textfield empty
$(".ginput_container").append('<br><span>Success - Your link has been deleted</span'); // put a success message
});
});
You may apply css for the formatting

Sorry if i misunderstood your question but to reset input type text field, you only need to set its value to empty string:
$('#id').val('');