Angular JS update input field after change

I’m trying to build a simple calculator in Angular in which I can override the total if I want. I have this part working but when I then go back to enter in a number in fields one or two the total isn’t updated in the field.

Here is my jsfiddle http://jsfiddle.net/YUza7/2/

The form

<div ng-app>
  <h2>Calculate</h2>

  <div ng-controller="TodoCtrl">
    <form>
        <li>Number 1: <input type="text" ng-model="one">  
        <li>Number 2: <input type="text" ng-model="two">
        <li>Total <input type="text" value="{{total()}}">       
        {{total()}}
    </form>
  </div>
</div>

The javascript

function TodoCtrl($scope) {
    $scope.total = function(){
        return $scope.one * $scope.two;
    };
}

Why doesn’t an input field change update angular model?

This is a very newbie question but why doesn’t document.getElementById(demo).value update angular model? It updates the input field, but it updates the model only after manually putting something

Angular JS get error to show after user highlights input field and doesnt enter anything

I have some Angular JS validation working on my wizard steps app and errors appear when the user enters a character in the input field and removes it. I am wondering how do I get the error to show aft

Angular.js: How to change div width based on user input

I have an input box which accepts the value for div width. Using angular.js, How can you change div’s width based on user input? I have implemented following code after referring this fiddle.http://js

Update Angular model after setting input value with jQuery

I have this simple scenario: – input element which value is changed by jQuery’s val() method I am trying to update the angular model with the value that jQuery set. I tried to write a simple directive

Angular js toggle button after field validation

I have an in which validations are done using angularjs.On submitting the form button is disabled and will enable after getting the response.But button is not getting enabled.For disabling the button

Angular.js: update binding after manual modification

I’m only starting to dive into angular.js and have found this issue that I can’t seem to get around. Consider this simple code: <input type=text ng-model=test> <input type=text value={

Update input field number after counting checkboxes

I’m making a form and I’m counting the check boxes that are checked yes or no using this as a guide. I can get the number but it doesn’t show in the input field. I see it update looking at the code wi

Update after a table field change

I have a problem with a old Delphi system, this system insert data into a SQL Server table. After 10 years change a field of the table from 100 to 255 chars long. The system select all the registris o

Angular.js Accessing input field value inside controller $scope

I’ve got a directive which defines a input field of type=file, which I can print and is not empty, namely: <form class=form-horizontal role=form> <input type=file file-model=myFile/

Angular JS – model not updating number input field

I have the following, and I’m sure there’s some simple solution here that I’m just overlooking. I’m loading data into the model, but it’s not updating the input field. <div ng-app> <h2>Tes

Answers

I’m guessing that when you enter a value into the totals field that value expression somehow gets overwritten.

However, you can take an alternative approach: Create a field for the total value and when either one or two changes update that field.

<li>Total <input type="text" ng-model="total">{{total}}</li>

And change the javascript:

function TodoCtrl($scope) {
    $scope.$watch('one * two', function (value) {
        $scope.total = value;
    });
}

Example fiddle here.

You can add ng-change directive to input fields. Have a look at the docs example.

Create a directive and put a watch on it.

app.directive("myApp", function(){
link:function(scope){

    function:getTotal(){
    ..do your maths here

    }
    scope.$watch('one', getTotals());
    scope.$watch('two', getTotals());
   }

})

You just need to correct the format of your html

<form>
    <li>Number 1: <input type="text" ng-model="one"/> </li>
    <li>Number 2: <input type="text" ng-model="two"/> </li>
        <li>Total <input type="text" value="{{total()}}"/>  </li>      
    {{total()}}

</form>

http://jsfiddle.net/YUza7/105/

I wrote a directive you can use to bind an ng-model to any expression you want. Whenever the expression changes the model is set to the new value.

module.directive('boundModel', function() {
  return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModel) {
      scope.$watch(attrs.boundModel, function(newValue, oldValue) {
        if(newValue != oldValue) {
          ngModel.$setViewValue(newValue);
          ngModel.$render();
        }
      });
    }
  };
})

You can use it in your templates like this:

 <li>Total<input type="text" ng-model="total" bound-model="one * two"></li>