更改后更新输入字段

Question

我正在尝试用Angular构建一个简单的计算器，如果我想的话，我可以覆盖总数。我有这部分的工作，但当我回去输入一个数字在一个或两个领域的总数没有在该领域的更新。

这是我的jsfiddlehttp://jsfiddle.net/YUza7/2/

形式

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

javascript

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

Answer 1

我编写了一个指令，您可以使用它将ng模型绑定到您想要的任何表达式。无论表达式何时更改，模型都将设置为新值。

 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();
          });
        }
    });

您可以在模板中使用它，如下所示：

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

Answer 2

我猜当你在总计字段中输入一个值时，这个值表达式会以某种方式被覆盖。

但是，您可以采取另一种方法：为总值创建一个字段，并在one或two更改时更新该字段。

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

并更改javascript：

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

这里是小提琴的例子。

Answer 3

您可以向输入字段添加ng change指令。看看docs示例。