Angular.js - change content once both inputs have been entered? - css

Question

I'm pretty new to angular (as you might guess). I'm trying to understand the best way to change content depending on what gets input in fields.
For example, I have
<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>
And I'm trying to display the product of the two variables, once both have been entered:
<p>Your total value is
{{ (var1 * var2).isFinite? (var1 * var2) : 'Please enter a number' }} </p>
However, this doesn't work - it always displays 'Please enter a number'.
What is the best way to do this?

Answer 1

I would keep that logic out of the HTML and in your controller if possible and add another function to set a new value in your view (either num1 * num2 or "Please enter a number").
$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"
};
}
Then update your html as so:
<p>Your total value is {{answer}} </p>
You will need to run $scope.checkFinite() when your input changes, there are a couple of ways you can do that:
<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>
Basically, if the values change in the inputs, it will run $scope.checkFinite(), its a nifty little directive in Angular.
Another way you can do this, where you run the function ($scope.checkFinite()) when either inputs change is through a couple of watches in your controller:
$scope.$watch('num1', function() {
$scope.checkFinite();
});
$scope.$watch('num2', function() {
$scope.checkFinite();
});
Let me know if you have any other questions!
PS Don't go crazy with $scope.$watch, it's easy to fall into that trap.

Answer 2

The simplest method would be to use 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>