Question

我刚刚开始学习Angular JS，我需要一种方法来使用ng-show来显示一行文字，考虑以下内容：

1。）如果两个数字字段都已填写，则显示文本行。

2.）如果两个数字字段都已填写但两者都为0，则显示文本行。

3.如果两个数字字段都已填写且一个为0但另一个为不同的数字，则显示文本。

到目前为止，这是我的代码：

<p ng-show="(firstNumber && secondNumber) || (firstNumber == 0 && secondNumber == 0)">
    The product is {{firstNumber * secondNumber}}
</p>

现在，这行代码满足要求1和2，但是当输入0并输入另一个不为零的数字时，文本行不会显示。

有关如何完成此操作的任何想法？我觉得条件操作语句会非常复杂。

我想我应该包含更多我的代码，因为许多人似乎认为我有＆＃34; text＆＃34;当我有＆＃34;数字＆＃34;时作为输入类型。这可能就是查理的解决方案无法解决的原因：

<p>Enter first number: <input type="number" ng-model="firstNumber"></p>
<p>Enter second number: <input type="number" ng-model="secondNumber" /></p>

Answer 1

所有要求的集体逻辑是看两个字段是否都是数字。

<p ng-show="isNumber(firstNumber) && isNumber(secondNumber))">
    The product is {{firstNumber * secondNumber}}
</p>

在您的控制器中

$scope.isNumber = function(value) {
   return !isNaN(value)
}

Answer 2

将每个复杂逻辑封装到控制器的函数方法或更好的模型中是个好主意，例如：

.controller('MyCtrl', function($scope){
  $scope.isResultVisible = function(){
    return $scope.firstNumber >= 0 && $scope.secondNumber >= 0;
  };
  $scope.result = function(){
    return $scope.firstNumber * $scope.secondNumber;
  };
});

然后在标记中使用它：

<p ng-show="isResultVisible()">
    The product is {{result()}}
</p>

Angular JS - 使用ng-show根据复杂的需求显示内容

2 个答案: