Angular - Adding an input's value with a number from $scope

Question

I have the following code:

<div data-ng-controller="MainController">
        <input class="amount" type="text" name="" value="" />
        <input class="result" type="text" name="" value=""/>
</div>

I want to take a numerical value from $scope and add it to a number entered by a user in the input with class "amount" and display the result in the input with class "result". So, basically, the variable is defined in the MainController function as the following:

$scope.cost = 100;

I'm a bit confused as to what the best way is to do this, I see there are ng-value and ng-model directives at my disposal but I am having a hard time understanding which is the right one for this application (and how to properly use them).

you should use `ng-model="cost"` that will two way binding – Pankaj Parkar Jun 24 '15 at 21:27 — Pankaj Parkar, Jun 24 '15 at 21:27

Pankaj Parkar · Accepted Answer · 2015-06-24T21:36:15.533

3

Seems like your application is asking for an inputs and they are going to submit there values OR gonna store it somewhere in DB. So ng-model (two way binding) will suits you application, which will update the value on model & view both.

Markup

<div data-ng-controller="MainController">
    <input class="amount" type="text" ng-model="cost"/>
</div>

Above field will pre-populated as 100 and as you update it will also change $scope.cost value and the value if it is displayed on view anywhere.

Don't think about the ng-value that is only one way sort of binding. You can assign the value to input using ng-value="cost" that will only update the value attribute of input but when you update input from html you will never get those changes reflected inside cost scope variable as ng-value is meant for single way binding. Thinks like you should use use ng-value only when you want to display a value.

edited Jun 24 '15 at 21:36

answered Jun 24 '15 at 21:29

Pankaj Parkar

134,766
23
234
299

im not looking to have the input pre-populated with the 'cost' - rather - i'd like to take that 'cost' and add it to the number entered in the input (and then display this somewhere else). So, according to your (awesome) explanation, I think i might actually want ng-value. Again, I dont want to change the cost in the scope for this application. I want to see how many items the user wants and then fetch the price and display the result in the other input. I hope that makes sense. – Moose Jun 24 '15 at 21:37
1

@Moose yes..you should use `ng-value` then..I covered this point in my explaination already.. – Pankaj Parkar Jun 24 '15 at 21:38
okay so i would need to take that ng-value of 'cost' and do something like this: – Moose Jun 24 '15 at 21:48
1

I think you want to display the addition somewhere on html with user entered value and cost..so then the html would be `` then wherever you want to show addition you could use this `{{ whateverTheUserEnteredIntoTheAmountInput + cost }}` basically you need to use combination of both – Pankaj Parkar Jun 24 '15 at 21:52
OH! I get it now that totally makes sense.... I'll try this soon and let you know how it works out! – Moose Jun 24 '15 at 22:04
1

@Moose Glad to help you..Thanks :) – Pankaj Parkar Jun 24 '15 at 22:05

score 1 · Answer 2 · edited Jun 24 '15 at 21:43

1

you should use ng-model

ng-value : Its a directive useful for evaluating expression and the value is bound to $scope used for evaluating expressions
ng-model : helps in two-way data binding ,view-->controller and vice versa moreover its a directive binds the value of HTML controls

edited Jun 24 '15 at 21:43

Pankaj Parkar

134,766
23
234
299

answered Jun 24 '15 at 21:33

Shushanth Pallegar

2,832
1
14
16

Angular - Adding an input's value with a number from $scope

2 Answers2