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>