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

Question

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

我想做的是制作一个基本的 $dollar 到 Gold oz 计算器，它包含两个输入字段。示例预览：http://embed.plnkr.co/dw6xL95zRqJC1pIlE1Kf/preview

第一个输入是 美元数量 ，第二个输入是 盎司数量 。第三个变量包含 黄金卖出率。

在我的代码中，我已经能够通过 angular 双向数据绑定成功更改美元金额并使 oz 金额 更新。

问题是试图使相反的工作；例如，更改 oz 数量 也应该更新 dollar 数量。

这是我的 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

首先，您还需要双向绑定 oz 输入：

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

那你需要2款手表：

$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;
}

这不会触发无限摘要循环。查看分叉的 plunk：http://plnkr.co/edit/m3YLodjvmglLMlqSHtFi?p=preview

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

Answer 2

使用类似 ng-change 的东西。在 html 你会得到类似

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

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

添加 angular 更新您的盎司的功能

$scope.update = function() {
    // add logic here doing what ozCalc() is doing
    $scope.oz = updatedValue;
}

您需要更改 ng-model 的表达式并进行另一个 ng-change。

  <!-- Ounces input -->
  <label class="small-6 columns">Ounces (oz):
    <input type="number" ng-model="oz" ng-change="update2()">
  </label>

</div>

然后在angular

中再添加一个函数

$scope.update2 = function() {
    // add logic here
    $scope.dollar = updatedValue;
}

此外，正确使用 ng-model 的注意事项：

https://github.com/angular/angular.js/wiki/Understanding-Scopes

This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models

关于此的要点是您使用的任何模型，请确保对其进行设置，以便您需要执行以下操作。

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

在你的代码中有这样的东西

$scope.amount = {
    oz = 0;
    dollar = 0;
}

如果您不使用 .在您的 ng-model 中，有时会有一个子节点会覆盖父节点，从而使您无法编辑实际变量。这通常不是问题，除非您使用 ng-repeat 之类的东西，但我认为值得一提。

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

Can Angular do two way data binding backwards between two input fields?

javascript

data-binding

angularjs