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

Самый простой метод должен был бы использовать нг-если:

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