AngularJS-检查类型为“数字”的输入是否具有值，0为有效值

Question

I am struggling to get AngularJS to work properly with a small thing that I am trying to implement.

I have an input of type number (which likely causes the issue) which is bound to a variable in my controller, and I need to disable a button if this input is empty.

Here's the code for my input and button:

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

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

I tried several solutions to disable my button if the field is empty, but enable it if it has a value of 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>

None of those seem to work. It will work properly if I have any number in my input, but either the button will be disabled if I have the value "0", or the button will stay enabled if I put a valid value and then remove it.

What makes me think that it should work is the fact that if I display the value using {{ student.mark }} , the value 0 will indeed show as "0" and an empty input will show as empty.

Thanks.

Answer 1

NOTE : 0 is treated as false.

In your controller define

 $scope.student.mark = null;

Use condition

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

Answer 2

I would suggest you to use form for that, something like that:

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