数据绑定 – 华氏和摄氏度双向转换

发布时间：2020-12-17 09:29:21 所属栏目：安全来源：网络整理

导读：在AngularJS中,直观的观察$scope变量,并使用它来更新另一个.但是如果两个范围变量需要彼此观看,那么最佳实践是什么？我将一个双向转换器作为一个例子,将华氏温度转换为摄氏度,反之亦然.如果您将“1”输入华氏度,则可以正常工作,但尝试“1.1”,Angular会在覆

在AngularJS中,直观的观察$scope变量,并使用它来更新另一个.但是如果两个范围变量需要彼此观看,那么最佳实践是什么？

我将一个双向转换器作为一个例子,将华氏温度转换为摄氏度,反之亦然.如果您将“1”输入华氏度,则可以正常工作,但尝试“1.1”,Angular会在覆盖华氏度之前稍稍反弹,您刚刚输入的值将略有不同(1.1000000000000014)：

function TemperatureConverterCtrl($scope) {
  $scope.$watch('fahrenheit',function(value) {
    $scope.celsius = (value - 32) * 5.0/9.0;
  });
  $scope.$watch('celsius',function(value) {
    $scope.fahrenheit = value * 9.0 / 5.0 + 32;
  });
}

这是一个坑：http://plnkr.co/edit/1fULXjx7MyAHjvjHfV1j?p=preview

什么是不同的可能方法来阻止角度“弹跳”,迫使它使用您键入的值,例如.通过使用格式化器或解析器(或任何其他技巧)？

我认为最简单,最快,最正确的解决方案是使用一个标志来跟踪正在编辑的字段,并且仅允许该字段的更新.

所有您需要的是使用ng-change指令在要编辑的字段上设置标志.

Working Plunk

代码更改必要：

修改控制器看起来像这样：

function TemperatureConverterCtrl($scope) {
  // Keep track of who was last edited
  $scope.edited = null;
  $scope.markEdited = function(which) {
    $scope.edited = which;
  };

  // Only edit if the correct field is being modified
  $scope.$watch('fahrenheit',function(value) {
    if($scope.edited == 'F') {
      $scope.celsius = (value - 32) * 5.0/9.0;
    }
  });
  $scope.$watch('celsius',function(value) {
    if($scope.edited == 'C') {
      $scope.fahrenheit = value * 9.0 / 5.0 + 32;
    }
  });
}

然后将这个简单的指令添加到输入字段(根据需要使用F或C)：

<input ... ng-change="markEdited('F')/>

现在只有输入的字段可以改变另一个.

如果您需要在输入外部修改这些字段的功能,则可以添加一个示例或控件函数,如下所示：

$scope.setFahrenheit = function(val) {
  $scope.edited = 'F';
  $scope.fahrenheit = val;
}

然后在下一个$digest循环中更新摄氏度字段.

该解决方案具有极少的额外代码,消除了每个周期的多次更新的机会,并且不会导致任何性能问题.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!