如果在两个输入框中的任何一个输入框中输入，如何自动将输入框的值设置为相反的数字？

Question

我们说我们有2个输入框：

1. NUM1
2. NUM2

当用户在2个输入框中的任何一个输入一个数字时，我们想要发生的是自动将另一个输入框的值设置为该数字的相反符号。

示例：

• 用户在num1中输入1。应自动设置num2的值 到-1。
• 用户在num1中输入-1。应自动设置num2的值 到1。

使用AngularJS 1.x时，我们如何实现这一目标？

Answer 1

有几种方法可以做到这一点：

1. 在您的控制器中，监视num1和num2的值。它可能看起来像这样（假设$ scope注入你的控制器）

示例HTML

<input type="number" ng-model="num1">
<input type="number" ng-model="num2">

示例JS

$scope.$watch('num1', function(newVal){
  $scope.num2 = - newVal;
}

$scope.$watch('num2', function(newVal){
  $scope.num1 = - newVal;
}

如果您打算重复使用具有多个视图的控制器，或者模型数据（num1和num2）之间存在固有关系，则这种方式更为可取。如果数字因任何原因发生变化（其他绑定，javascript中的显式更改等），手表将会触发。

1. 在您的输入中有一个ng-change设置角度表达式中的值

示例HTML

<input type="number" ng-model="num1" ng-change="num2=-num1">
<input type="number" ng-model="num2" ng-change="num1=-num2">

如果您只关心一个数字，或者此逻辑仅属于视图，则这种方式更可取。它也可以更高效，因为它挂钩更改事件而不是执行和等效检查每个摘要周期。但是，这意味着如果通过除更改输入框之外的任何方式更改其中一个数字，则不会反映更改。感谢Manatax在下面的评论中指出了大部分好处。