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).

Answer 1

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.

Answer 2

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