Angularjs input is not changing when updating via JS and not manual - javascript

I have a simple form, when I type in the input, i see the changes.
But when I do it dynamically via JS the bind is not changing:
<div ng-app>
type here and see how the binding changes:
<input type="text" id="test" ng-model="name" />
<br /><br />
Changes and binding <span style='color:red'>{{name}}</span><Br /><Br />
<button onclick="document.getElementById('test').value = 'blaaaa'">Click and see how the binding is not changing</button>
</div>
http://jsfiddle.net/hge2hnc4/

this is because, when you click the button you try to change the textbox value not the textbox model(name) value, if you change the model name value you will be able to see the update
Here is a forked Demo

Related

What is the exact purpose of value attribute for an HTML button element?

What is the exact purpose of the value attribute for an HTML button element?
Is its use only limited to cases involving form submit?
Can you give one example where the use of value attribute is absolutely necessary?
You can have two buttons with same name to submit different values.
<form action="/action_page.php" method="get">
Choose your favorite subject:
<button name="subject" type="submit" value="fav_HTML">HTML</button>
<button name="subject" type="submit" value="fav_CSS">CSS</button>
</form>
Like: subject=fav_HTML
You can pass value via event.target.value to a function for example.
myfunction(event){
console.log(event.target.value);
}
<button value="foo" onclick={myfunction}></button>

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

Bind input value to ng-click button (send value as parameter)

I'm trying to bind the value from an input field to the parameter of my method on ng-click. Here's what I got, but it doesn't work, and I am not too sure if it's possible to do it this way?:
<input type="text" name="name" value="{{post.PostId}}" />
<button ng-click="getById(post.PostId)"></button>
<h1>{{post.Title}}</h1>
$scope.getById = function (id) {
console.log(id);
return $http.get('/api/Post/' + id);
}
You should use ng-model directive for your input element.
Markup
<input type="text" name="name" ng-model="post.PostId" />
<button ng-click="getById(post.PostId)"></button>
<h1>{{post.Title}}</h1>
This will take care of 2-way model binding to your property post.PostId. Your ng-click directive will pick up the correct value entered in input element.
See my working Plunk :)

How to modify label of input using JQuery

I have HTML like following :
<div class="task-manager">
<label>Manager: <input type="text" value="" /></label>
</div>
I need to modify text of label Manager dynamically.
I tried using JQUERY text method, but it replaces input type also.
$taskTemplate.find(".task-manager label").text("M123")
You can use:
$taskTemplate.find(".task-manager label").contents().get(0).nodeValue = "M123:";
You should change your HTML code, because <input> field is inside <label> and when you are changing value of this label, it's also overwriting and removing input form field:
<div class="task-manager">
<label>Manager:</label> <input type="text" value="" />
</div>
Just move the Input tag outside the label tag, because when your updating the text of your label, its erasing the content of label (which will obviously remove input tag inside it) , so change your code like this
HTML code:
<div class="task-manager">
<label for="title">Manager:</label>
<input type="text" id = 'title' value="" />
</div>
JS code:
$('.task-manager label').text('Deputy Manager :');
Live Demo # Jsfiddle:
http://jsfiddle.net/dreamweiver/w6arp71x/
note/suggestion:for attribute added to label to bind the input to the label by default
$taskTemplate.find(".task-manager label").contents().get(0).nodeValue = "M123:"
this worked for :)

How to reset a value to its original state if changed

If I change an inputs value and want to reset it back to the original value onClick of a link how can I accomplish that?
I can use .data() to grab and store the original value but I am not sure of the best way to restore it if needed.
HTML:
<input class="someClassName" type="text" value="100" />
Edit
Reset
This is how I think it would work...
In the HTML above, the input will be rendered with a value of "100". If I then click "edit" I can use .date() to store the original value (100). I can then change the value of the input but if I wanted to reset the value back it's original state I would need to call the .data() info and use it to restore the value of the input.
How would I do that using jQuery?
using .data is perfect for that. look no further
update - with some code directions
Assuming you want to have this done for many input fields and not just one I am assuming each input+edit+reset are contained in a single parent
<div>
<input class="someClassName" type="text" value="100" />
<a class="EditLink" href="#">Edit</a>
<a class="ResetLink" href="#">Reset</a>
</div>
and in your init script block
$(".EditLink").click(
function() {
$(this).parent().children("INPUT").data("val",
$(this).parent().children("INPUT").val());
});
$(".ResetLink").click(
function() {
$(this).parent().children("INPUT").val(
$(this).parent().children("INPUT").data("val"));
});
I didn't test it but it should work
I would recommend giving your input an id then reference that.
<input class="someClassName" id="theInput" type="text" value="100" />
Edit
Reset
<script type="text/javascript">
$(document).ready(function{
$("#Edit").click(function{
$("#theInput").data('originalValue',$("#theInput").val());
});
$("#Reset").click(function{
$("#theInput").val($("#theInput").data('originalValue'));
});
});

Categories

Resources