Question

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

我想要做的是将一个基本的 $ dollar 设置为 Gold oz 计算器，该计算器包含两个输入字段。示例预览：http://embed.plnkr.co/dw6xL95zRqJC1pIlE1Kf/preview

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

在我的代码中，我已成功更改美元金额，并通过角度双向数据绑定更新 oz amount 。

问题是试图做出相反的工作;例如，更改盎司金额也应该更新美元金额。

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

这是我的角度代码：

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

然后你需要看两个型号的手表：

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

NOT 会触发无限的摘要周期。请参阅forked 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>

添加角度功能以更新盎司

$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

通过遵循＆＃34;最佳实践＆＃34;可以很容易地避免使用原语这个问题。总是有一个＆＃39;。在您的ng模型中

对此的消失是您使用的任何型号，请务必进行设置，以便您需要对以下内容采取措施。

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

你的代码中的

有这样的东西

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

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

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

2 个答案: