AngularJS-檢查類型為“數字”的輸入是否具有值，0為有效值

Question

我正在努力使AngularJS在我嘗試實現的一件小事情上正常工作。

我有一個類型為number的輸入（可能會導致問題），該輸入已綁定到控制器中的變量，並且如果此輸入為空，則需要禁用按鈕。

這是我的輸入和按鈕的代碼：

<input type="number" min="0" max="20" ng-model="student.mark">

<button ng-disabled="!student">Send</button>

我嘗試了幾種解決方案來在字段為空的情況下禁用我的按鈕，但是在其值為0其啟用：

<button ng-disabled="!student || !student.mark">Send</button>

<button ng-disabled="!student || !angular.isNumber(student.mark)">Send</button>

<button ng-disabled="!student || student.mark == ''">Send</button>

<button ng-disabled="!student || student.mark === ''">Send</button>

這些似乎都不起作用。 如果我在輸入中輸入任何數字，它將正常工作，但是如果我輸入的值為“ 0”，則該按鈕將被禁用，或者如果我輸入了一個有效值然后將其刪除，則該按鈕將保持啟用狀態。

我認為應該起作用的原因是，如果我使用{{ student.mark }}顯示值，則值0的確會顯示為“ 0”，而空的輸入將顯示為空。

謝謝。

Answer 1

注意：0被視為錯誤。

在您的控制器中定義

 $scope.student.mark = null;

使用條件

 ng-disabled="student.mark == null && student.mark < 0"

Answer 2

我建議您使用表格，例如：

<form name="formName" ng-submit="someMethod(student)" autocomplete="off" 
novalidate>

<input type="number" min="0" max="20"
    ng-model="student.mark" placeholder="e.g. 12"
    ng-required="true" /> 
<button type="submit" value="Send" ng-disabled="formName.$invalid || <something else here>" />
</form>

Answer 3

我嘗試了更多操作，然后實際測試了該值是否為null達到了目的：

<button ng-disabled="!student || student.mark === null">Send</button>