Angular.js - 一旦输入两个输入都会更改内容?
问题描述:
我对角度很陌生(正如你猜测的那样)。我试图了解根据在字段中输入内容来更改内容的最佳方式。Angular.js - 一旦输入两个输入都会更改内容?
例如,我有
<div ng-app = "">
<p>Enter variable 1: <input type = "number" ng-model = "var1"></p>
<p>Enter variable 2: <input type ="number" ng-model ="var2"></p>
而且我想显示两个变量的产品,一旦双方已进入:
<p>Your total value is
{{ (var1 * var2).isFinite? (var1 * var2) : 'Please enter a number' }} </p>
然而,这不起作用 - 它总是显示'请输入一个数字'。
这样做的最好方法是什么?
答
如果可能,我会在HTML和控制器中保留该逻辑,并添加另一个函数在视图中设置新值(num1 * num2或“请输入数字”)。
$scope.isFinite = function(num1, num2) {
//Your logic for this function
}
$scope.checkFinite() {
$scope.answer = null;
if($scope.isFinite($scope.num1, $scope.num2)) {
$scope.answer = $scope.num1 * $scope.num2;
};
else {
$scope.answer = "Please enter a number"
};
}
然后更新HTML像这样: <p>Your total value is {{answer}} </p>
您将需要运行$ scope.checkFinite()当你输入的变化,有几个方法,你可以这样做:
<div ng-app = "">
<p>Enter variable 1: <input type = "number" ng-change="checkFinite()" ng-model = "var1"></p>
<p>Enter variable 2: <input type ="number" ng-change="checkFinite()" ng-model ="var2"></p>
基本上,如果输入值改变,它将运行$ scope.checkFinite(),它是Angular中的一个漂亮的小指令。
另一种方法可以做到这一点,在那里你运行函数($ scope.checkFinite())既可以当输入的变化是通过在控制器中的情侣手表的:
$scope.$watch('num1', function() {
$scope.checkFinite();
});
$scope.$watch('num2', function() {
$scope.checkFinite();
});
让我知道,如果你有任何其他问题!
PS不要为$ scope而疯狂,$ watch,很容易陷入陷阱。
答
最简单的方法是使用NG-IF:
<p>Enter variable 1: <input type = "number" ng-model = "var1"></p>
<p>Enter variable 2: <input type ="number" ng-model ="var2"></p>
<p>
<div ng-if="var1 && var2">Your total value is {{(var1 * var2)}}</div>
<div ng-if="!var1 || !var2">'Please enter a number'</div>
</p>
isFinite的()必须使用括号被调用,因为它的功能。 –