Angular JS update input field after change

Question

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   lt div ng-app gt     lt h2 gt Calculate lt  h2 gt      lt div ng-controller  TodoCtrl  gt       lt form gt           lt li gt Number 1   lt input type  text  ng-model  one  gt             lt li gt Number 2   lt input type  text  ng-model  two  gt           lt li gt Total  lt input type  text  value    total      gt                   total          lt  form gt     lt  div gt   lt  div gt    The javascript  function TodoCtrl  scope         scope total   function            return  scope one    scope two

User · Answer

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    lt li gt Total  lt input type  text  ng-model  total  gt   total   lt  li gt    And change the javascript   function TodoCtrl  scope         scope  watch  one   two   function  value             scope total   value              Example fiddle here

User · Answer

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

User · Answer

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              var boundModel watcher   scope  watch attrs boundModel  function newValue  oldValue                if newValue    oldValue                  ngModel  setViewValue newValue                 ngModel  render                                              When  destroy is fired stop watching the change               If you don t  and you come back on your state              you ll have two watcher watching the same properties           scope  on   destroy   function                   boundModel watcher                                      You can use it in your templates like this     lt li gt Total lt input type  text  ng-model  total  bound-model  one   two  gt  lt  li gt

User · Answer

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

User · Answer

You just need to correct the format of your html   lt form gt       lt li gt Number 1   lt input type  text  ng-model  one   gt   lt  li gt       lt li gt Number 2   lt input type  text  ng-model  two   gt   lt  li gt           lt li gt Total  lt input type  text  value    total       gt    lt  li gt              total       lt  form gt    http   jsfiddle net YUza7 105

[angularjs] Angular JS update input field after change

Examples related to angularjs