javascript - Angular 可以在两个输入字段之间进行双向数据绑定(bind)吗？

Question

更改相反的输入时，我无法使两个输入字段更新值。

我想做的是制作一个基本的美元到金盎司计算器，它接受两个输入字段。示例预览:http://embed.plnkr.co/dw6xL95zRqJC1pIlE1Kf/preview

第一个输入是美元金额，第二个输入是盎司金额。第三个变量包含黄金售价。

在我的代码中，我已经能够成功更改美元金额并通过 Angular 双向数据绑定(bind)更新盎司金额。

问题是试图让相反的事情发生；例如，更改盎司金额也会更新美元金额。

这是我的 html 代码:

<div class="row panel" ng-controller="ctrl">

  <!-- Dollar input -->
  <label class="small-6 columns">Dollar $:
    <input type="number" ng-model="dollar">
  </label>

  <!-- Ounces input -->
  <label class="small-6 columns">Ounces (oz):
    <input type="number" value="{{ ozCalc() | number:4 }}">
  </label>

</div>

这是我的 Angular 代码:

var app = angular.module('app', []);

app.controller('ctrl', ['$scope', function($scope) {
    $scope.dollar = 0;
    $scope.oz = 0;
    $scope.rate = 1267;

    //Dollar to Ounce Calculator
    $scope.ozCalc = function() {
        var oz = $scope.dollar / $scope.rate;
        return oz;
    };

    //Ounce to Dollar Calculator
    $scope.dollarCalc = function() {
        var dollar = $scope.oz * $scope.rate;
        return dollar;
    };

}]);

任何帮助将不胜感激。谢谢

Answer 1

首先，您还需要 2 路绑定(bind) oz 输入:

<input type="number" ng-model="oz">

那么您需要两种型号的 watch :

$scope.$watch('dollar', function(newval, oldval) {
    $scope.oz = ozCalc(newval);
});

$scope.$watch('oz', function(newval, oldval) {
    $scope.dollar = dollarCalc(newval);
});

对功能进行微小的更改(旁注:考虑将它们重构为服务):

//Dollar to Ounce Calculator
function ozCalc(dollar) {
    var oz = dollar / $scope.rate;
    return oz;
}

//Ounce to Dollar Calculator
function dollarCalc(oz) {
    var dollar = oz * $scope.rate;
    return dollar;
}

这不会触发无限的摘要循环。请参阅 fork 的 plunk:http://plnkr.co/edit/m3YLodjvmglLMlqSHtFi?p=preview

如果您希望 oz 输入格式为 4 位数字，请使用 ngModel.$parsers/$formatters 管道，而不是过滤器。