Update dynamically created input field value on button click using angularjs

Question

Lets say, I'm having 5 text box which are created dynamically. All fields having default value that are coming from database and that are binded to input field.

<html>
<div data-ng-repeat="Input in InputArray">
    Input Field
    <label>{{$index + 1}} : </label>
    <input type="text" data-ng-model="Input.InputValue" data-ng-change="" />
</div>
<div>
    Calculated Result :    
    <label>{{CalculatedValue}}</label>
</div>
<div>
    <input type="button" name="Update Calculated Result to 3rd Input Field" data-ng-click="" />
</div>
</html>

I'm having label which have Calculated value. Its value is updated from another input field.

I want to update particular / only one text box value from that label value on a button click.

Is it possible to update by using ID of input field?

can you please create a fiddle for this ?

Varun
– Varun

2015-09-08 05:59:18 +00:00
Commented Sep 8, 2015 at 5:59 — Varun
– Varun, Commented Sep 8, 2015 at 5:59
you can update InputArray in the 3rd place

Guy
– Guy

2015-09-08 06:04:41 +00:00
Commented Sep 8, 2015 at 6:04 — Guy
– Guy, Commented Sep 8, 2015 at 6:04

JB Nizet · Accepted Answer · 2015-09-08 06:06:12Z

0

You don't need any DOM manipulation. The input field is two-way bound to the model, so all you need to get the field value is to get the corresponding model value.

So, to get the third input field value, since it's bound to the InputValue field of the third Input object in InputArray, all you need is

$scope.CalculatedValue = $scope.InputArray[2].InputValue;

Similarly, if you want to set the third field value with the value contained in CalculatedValue, all you need it

$scope.InputArray[2].InputValue = $scope.CalculatedValue;

answered Sep 8, 2015 at 6:06

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lakshmana Kumar Over a year ago

Is it possible to do something like this in button? <input type="button" ng-click="InputArray[2].InputValue = {{CalculatedValue}}" />

JB Nizet Over a year ago

You have to remove the curly braces. But I would rather call a function of the scope, and put that code in the function.

Collectives™ on Stack Overflow

Update dynamically created input field value on button click using angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related