Angular.js - 一旦输入两个输入都会更改内容？

Question

我对角度很陌生（正如你猜测的那样）。我试图了解根据在字段中输入内容来更改内容的最佳方式。

例如，我有

<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> 

然而，这不起作用 - 它总是显示'请输入一个数字'。

这样做的最好方法是什么？

Answer 1

如果可能，我会在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，很容易陷入陷阱。

Answer 2

最简单的方法是使用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>