1

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

Improve this question
1
  • 1
    you should use ng-model="cost" that will two way binding Commented Jun 24, 2015 at 21:27

2 Answers 2

Reset to default
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.

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

5 Comments

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 yes..you should use ng-value then..I covered this point in my explaination already..
okay so i would need to take that ng-value of 'cost' and do something like this: <input class="result" value="{{ whateverTheUserEnteredIntoTheAmountInput + cost }}"..... that's where I'm confused. How do I take the value entered by the user and add it to the cost? I get that we can pull in the cost by using ng-value but that's slightly different than what i need.
I think you want to display the addition somewhere on html with user entered value and cost..so then the html would be <input class="result" ng-model="whateverTheUserEnteredIntoTheAmountInput"/> then wherever you want to show addition you could use this {{ whateverTheUserEnteredIntoTheAmountInput + cost }} basically you need to use combination of both
OH! I get it now that totally makes sense.... I'll try this soon and let you know how it works out!
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
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.