javascript - 当两个输入框中任意一个有输入时，如何自动将输入框的值设置为相反的数字？

Question

假设我们有 2 个输入框:

1. num1
2. num2

当用户在两个输入框中输入数字时，我们希望自动将另一个输入框的值设置为该数字的相反符号。

示例:

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

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

Answer 1

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

1. 在 Controller 中监视 num1 和 num2 的值。它可能看起来像这样(假设 $scope 被注入(inject)到您的 Controller 中)

示例 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;
}

如果您打算将 Controller 与多个 View 一起重用，或者模型数据(num1 和 num2)之间存在固有关系，那么这种方式是更好的选择。如果数字因任何原因(其他绑定(bind)、JavaScript 中的显式更改等)发生更改， watch 将会触发。

在您的输入中使用 ng-change 设置 Angular 表达式中的值

示例 HTML

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

如果你只关心一个数字，或者这个逻辑只属于 View ，那么这种方式是更好的选择。它还可以更高效，因为它 Hook 更改事件，而不是在每个摘要周期进行等效检查。但是，这意味着如果通过更改输入框以外的任何方式更改其中一个数字，则不会反射(reflect)更改。感谢 Manatax 在下面的评论中指出了大部分好处。