Javascript 数据绑定，使用Angularjs和ng模型将毫米转换为英尺和英寸，反之亦然

我想把长度从毫米转换成英尺和英寸，反之亦然。用户可以输入mm或ft&in。在这种情况下，我总是想将mm中的数据保存到数据库中，但使用angular可以查看这两种格式的数据

我已经为它创建了一个解决方案。 但它每次都使用ng change来转换值

我想知道是否有一个角度专家有更好的想法做类似的事情。请注意，我只打算保存单个值

$scope.lengthm

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

    app.controller('MainCtrl', function($scope) {
 // $scope.lengthtodb = 0;

  $scope.mmToFtIn =function(){

    toInch = $scope.lengthmm * 0.0393701;
    toFt = toInch/12;
    OutputFT = Math.floor(toFt);
    OutputInch = (toFt - Math.floor(toFt))*12;
    $scope.lengthft = OutputFT;
    $scope.lengthin = OutputInch;


    $scope.Result1 = OutputFT + "ft" + OutputInch + "Inches";


  };

   $scope.FtInTomm =function(){

    tomm = (($scope.lengthft *12)+  $scope.lengthin)*25.4;
    $scope.lengthmm = tomm;

     $scope.Result2 = tomm;


  };

});

---

此外，由于将有许多字段使用相同的逻辑，因此可能需要将方法

mmToFTIn

拆分为两种方法来分别绑定ft和inches。但我真的很期待看到一个聪明的解决方案

最好使用过滤器将输出格式化到视图中

JS:

HTML:

这是通过首先“要求”ngModelController，然后使用其$parser和$formatters拦截模型和视图之间的通信来实现的

---

一个选项是在毫米变量上创建一个

$watch

，然后更新英寸模型。这可能是一个比ng change更好的选项，因为只要变量在范围内更改，

$watch

就会触发，而不仅仅是当文本框的输入更改时

我已经为你创造了。虽然您声明只希望使用一个变量，但我相信以这种方式使用第二个变量确实是更好的方法。或者，您可以使用对象或数组来维护单个变量，同时存储两个值

对于这个例子，我定义了如下的变量

    $scope.inches = 0;
    $scope.mm = 0;

然后我们就在这两个变量上创建一个手表。再次重申，只要

mm

变量发生更改，就会调用此函数，该变量允许您确保保持

mm

和

英寸之间的关系

    $scope.$watch('mm', function(newVal, oldVal) {
      $scope.inches = newVal / 25.4;
    });

你也可以这样做。。。如果您只需要以格式化的方式显示
mm
（而不是将其用于计算或其他事情），这可能是一个更好的解决方案

然后以后做

Inches Filter : {{ mm | mmToInches }}

您可以将参数添加到筛选器中，以使单个筛选器可以同时执行这两种转换

angular.module('myFilters', []).filter('convert', function() {
  return (function (input, type) {
    if (type == 'mm2inch')
    {
      return (input / 25.4);
    } else if (type == 'inch2mm') {
      return (input * 25.4);
    }
  });
});

Inches Filter : {{ mm | convert:'mm2inch' }}
MM Filter : {{ inches | convert:'inch2mm' }}

这是我对它的改进

该指令仅使用一个属性，该属性指向showFeets中的范围对象
（您可以任意调用它）

通常在控制器中设置的对象具有显示和存储功能。这个名字很有趣，但这是我能想到的最好的名字。一个将值返回到文本框中的show，另一个将值返回到模型中的store

$scope.inchesShowFeet = {
    show: function(val){ return val / 12; },
    store: function(val){ return val * 12; }
};

那么，假设我的模型中存储了
25
英寸。使用25的
val
调用show函数get。它将它除以12并返回它，它将显示在文本框中。当您键入
4
时，将使用
val
值4调用存储函数get。它将其乘以12并返回48，get存储在模型中。
谢谢这个好的解决方案！，两种方法都可以吗。这意味着，用户可以写入ft并获得mm？最后，这个mm值将被保存。再次检查Plunker，我添加了一个指令，该指令使用ngModelController进行格式化和解析。这真是太棒了！但你们转换英尺和英寸的方式不同，在我的解决方案中，英尺和英寸是在一起的，这意味着首先它得到英尺，然后英寸是它的其余部分。因为我对angularjs和directive option非常陌生，所以我不知道如何重新编辑它。现在你把它弄得很棘手：D你需要多快回答这个问题？我不介意今晚花点时间。嗨，@Christophermann，你能在这件事上支持我吗？我仍然被困在这个问题上：（您好，感谢您的解决方案。是否可以将方法/过滤器设置为双向数据绑定逻辑。这样用户就可以写入mm或ft英寸？过滤器是一个不错的选择，因为我可以在许多字段中使用它。我至少有25个字段可以将此mm转换为ftin，或者将其转换为ftin。这就是为什么我认为在经过一些修改后，可以使用函数重新使用它。）。对于双向数据绑定逻辑，请使用
$watch
。预览包括一个解析英寸和毫米字符串的过滤器。为了澄清这一点，我相信您拥有完成手头任务的工具，这是一个设计决策问题。如果您希望获得有关设计的帮助，请提供更多信息n决定。
$scope.inchesShowFeet = {
    show: function(val){ return val / 12; },
    store: function(val){ return val * 12; }
};

Inches Filter : {{ mm | mmToInches }}

angular.module('myFilters', []).filter('convert', function() {
  return (function (input, type) {
    if (type == 'mm2inch')
    {
      return (input / 25.4);
    } else if (type == 'inch2mm') {
      return (input * 25.4);
    }
  });
});

Inches Filter : {{ mm | convert:'mm2inch' }}
MM Filter : {{ inches | convert:'inch2mm' }}

<input type="text" ng-model="data.beamLength" 
       ng-enhanced-input="inchesShowFeet" 
       ng-model-options="{ debounce: 500 }" />

app.directive('ngEnhancedInput', function($parse){
  return {
    restrict: 'A',
    require: 'ngModel',
    link : function(scope, element, attr, ngModelCtrl){
      ngModelCtrl.$parsers.unshift(scope.$eval(attr.ngEnhancedInput).store);
      ngModelCtrl.$formatters.unshift(scope.$eval(attr.ngEnhancedInput).show);
    }
  };
});

$scope.inchesShowFeet = {
    show: function(val){ return val / 12; },
    store: function(val){ return val * 12; }
};