Let's say we have 2 input boxes:
假设我们有2个输入框：
- num1
- NUM1
- num2
- NUM2
When the user inputs a number in any of the 2 input boxes, what we want to happen is automatically set the value of the other input box to the opposite sign of the number.
当用户在2个输入框中的任何一个中输入数字时，我们想要发生的是自动将另一个输入框的值设置为该数字的相反符号。
Examples:
例子：
- User inputs 1 in num1. The value of num2 should automatically be set to -1.
- 用户在num1中输入1。 num2的值应自动设置为-1。
- User inputs -1 in num1. The value of num2 should automatically be set to 1.
- 用户在num1中输入-1。 num2的值应自动设置为1。
How can we achieve this when using AngularJS 1.x?
我们如何在使用AngularJS 1.x时实现这一目标？
1 个解决方案
#1
4
There are a couple ways to do this:
有几种方法可以做到这一点：
- In your controller put a watch on the values of num1 and num2. It might look something like this (assume $scope is injected in your controller)
- 在你的控制器中，监视num1和num2的值。它可能看起来像这样（假设$ scope注入你的控制器）
Example HTML
示例HTML
<input type="number" ng-model="num1">
<input type="number" ng-model="num2">
Example JS
示例JS
$scope.$watch('num1', function(newVal){
$scope.num2 = - newVal;
}
$scope.$watch('num2', function(newVal){
$scope.num1 = - newVal;
}
This way is preferable if you intend to reuse the controller with several views or there is an inherent relationships between the model data (num1 and num2). The watches will fire if the number are change for any reason (other bindings, explicit changes in javascript, etc).
如果您打算重复使用具有多个视图的控制器，或者模型数据（num1和num2）之间存在固有关系，则这种方式更为可取。如果数字因任何原因发生变化（其他绑定，javascript中的显式更改等），手表将会触发。
- In on your input have an ng-change set the value in an angular expression
- 在您的输入中有一个ng-change设置角度表达式中的值
Example HTML
示例HTML
<input type="number" ng-model="num1" ng-change="num2=-num1">
<input type="number" ng-model="num2" ng-change="num1=-num2">
This way is preferable if you only are only care about one number, or this logic only belongs in the view. It can also be more efficient, since it hooks the change event instead of doing and equivalence check every digest cycle. However, this means that if one of the number is changed though any means other than changing that input box the change will not be reflected. Credit to Manatax for pointing most of the benefits out in the comments below.
如果您只关心一个数字，或者此逻辑仅属于视图，则这种方式更可取。它也可以更高效，因为它挂钩更改事件而不是执行和等效检查每个摘要周期。但是，这意味着如果通过除更改输入框之外的任何方式更改其中一个数字，则不会反映更改。感谢Manatax在下面的评论中指出了大部分好处。
#1
4
There are a couple ways to do this:
有几种方法可以做到这一点：
- In your controller put a watch on the values of num1 and num2. It might look something like this (assume $scope is injected in your controller)
- 在你的控制器中，监视num1和num2的值。它可能看起来像这样（假设$ scope注入你的控制器）
Example HTML
示例HTML
<input type="number" ng-model="num1">
<input type="number" ng-model="num2">
Example JS
示例JS
$scope.$watch('num1', function(newVal){
$scope.num2 = - newVal;
}
$scope.$watch('num2', function(newVal){
$scope.num1 = - newVal;
}
This way is preferable if you intend to reuse the controller with several views or there is an inherent relationships between the model data (num1 and num2). The watches will fire if the number are change for any reason (other bindings, explicit changes in javascript, etc).
如果您打算重复使用具有多个视图的控制器，或者模型数据（num1和num2）之间存在固有关系，则这种方式更为可取。如果数字因任何原因发生变化（其他绑定，javascript中的显式更改等），手表将会触发。
- In on your input have an ng-change set the value in an angular expression
- 在您的输入中有一个ng-change设置角度表达式中的值
Example HTML
示例HTML
<input type="number" ng-model="num1" ng-change="num2=-num1">
<input type="number" ng-model="num2" ng-change="num1=-num2">
This way is preferable if you only are only care about one number, or this logic only belongs in the view. It can also be more efficient, since it hooks the change event instead of doing and equivalence check every digest cycle. However, this means that if one of the number is changed though any means other than changing that input box the change will not be reflected. Credit to Manatax for pointing most of the benefits out in the comments below.
如果您只关心一个数字，或者此逻辑仅属于视图，则这种方式更可取。它也可以更高效，因为它挂钩更改事件而不是执行和等效检查每个摘要周期。但是，这意味着如果通过除更改输入框之外的任何方式更改其中一个数字，则不会反映更改。感谢Manatax在下面的评论中指出了大部分好处。