CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-modelangularjs-ng-valueangularjs-bindings
Moose
Moose

Reputation: 1317

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

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

Upvotes: 1

Views: 1256

Answers (2)

Shushanth Pallegar
Shushanth Pallegar

Reputation: 2862

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

Upvotes: 1

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

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.

Upvotes: 3

Related Questions