如何在 AngularJS 中绑定 3 个或更多具有 1:1 关系的变量？

Question

假设我想在 AngularJS 中制作单位转换器。我也希望多个值在编辑时同时更改。

这意味着，例如，如果我们有 3 个变量，那么在每个变量发生变化时，另外 2 个应该自动发生变化。

这可能吗？

以下是 3 个距离单位、拍米、光年和秒差距的无效片段：

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

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

myControllers
  .controller('MyController', ['$scope', function ($scope) {
    $scope.petameters = 10;
    $scope.lightyears = $scope.petameters / 9.460730472580800;
    $scope.parsecs = $scope.lightyears / 3.2616;
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
    <div ng-controller="MyController">
        Petameters:<input type="text" ng-model="petameters"><br/>
          Light years:<input type="text" ng-model="lightyears"><br/>
          Parsecs:<input type="text" ng-model="parsecs"><br/>
    </div>
</body>

如何让它发挥作用？

更新

最后我编写了以下代码：

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

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

myControllers
  .controller('MyController', ['$scope', function ($scope) {
    
    $scope.petametersChanged = function() {
     $scope.lightyears = $scope.petameters / 9.460730472580800;
     $scope.parsecs = $scope.lightyears / 3.2616;
    }
    
    $scope.lightyearsChanged = function() {
     $scope.petameters = $scope.lightyears * 9.460730472580800;
     $scope.parsecs = $scope.lightyears / 3.2616;
    }
    
    $scope.parsecsChanged = function() {
     $scope.lightyears = $scope.parsecs * 3.2616;
      $scope.petameters = $scope.lightyears * 9.460730472580800;
    }
    
    $scope.petameters = 10;
    $scope.petametersChanged();
    
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
    <div ng-controller="MyController">
        Petameters:<input type="text" ng-model="petameters" ng-change="petametersChanged()"><br/>
          Light years:<input type="text" ng-model="lightyears" ng-change="lightyearsChanged()"><br/>
          Parsecs:<input type="text" ng-model="parsecs" ng-change="parsecsChanged()"><br/>
    </div>
</body>

Answer 1

试试这个：

JS

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

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

myControllers
  .controller('MyController', ['$scope',
    function($scope) {
      $scope.petameters;
      $scope.lightyears;
      $scope.parsecs;

      $scope.update = function(unit) {
        console.log('In Update');
        if(unit === 1) {
          $scope.lightyears = $scope.petameters / 9.460730472580800;
          $scope.parsecs = $scope.lightyears / 3.2616;
        } else if(unit === 2) {
          $scope.petameters = $scope.lightyears * 9.460730472580800;
          $scope.parsecs = $scope.lightyears / 3.2616;
        } else {
          $scope.lightyears = $scope.parsecs * 3.2616;
          $scope.petameters = $scope.lightyears * 9.460730472580800;
        }
      };
    }
  ]);

html

<body ng-app="myApp">
  <div ng-controller="MyController">
    Petameters:
    <input type="text" ng-model="petameters" ng-keyup="update(1)" />
    <br/>Light years:
    <input type="text" ng-model="lightyears" ng-keyup="update(2)" />
    <br/>Parsecs:
    <input type="text" ng-model="parsecs" ng-keyup="update(3)" />
    <br/>
  </div>
</body>

这是Plunker

如何在 AngularJS 中绑定 3 个或更多具有 1:1 关系的变量？

How to bind 3 or more variables with 1:1 relationships in AngularJS?

javascript

model-binding

angularjs