Example of bidirectional binding of AngularJS number input

Inexplicable two-way binding failure

From an accidental problem encountered during development, let's look at the following example:

<Div ng-app>
<Div ng-controller = "TodoCtrl">
<Input type = "number" ng-model = "value" size = "30">
<Input type = "button" ng-click = "change ()" class = "btn-primary" value = "TEST">
</Div>
</Div>
Function TodoCtrl ($ scope ){
$ Scope. change = function (){
$ Scope. value =''
  }
}
You can open the demo directly on JSFiddle. The purpose of this code is to enter any number in the box, and then press the TEST button to clear the number.

In most cases, this code is effective, but when we enter e, click the button, but there is no response.

Number input of HTML

In the title, I wrote the number input of AngularJS. In fact, number input is an HTML feature. Only valid numbers are allowed. The reason why e can be input is that the index is allowed. The above features can also be implemented using native:

<Script>
Function test (){
Var input = document. getElementById ('number-input ')
Input. value = ""
}
</Script>
<Input id = "number-input" type = "number">
<Input type = "button" onclick = "test ();" value = "TEST">
Then we will find that the job is very good, so what is the problem. We can try to simulate the dirty check of AngularJS here, that is, compare whether the values of View and Model are different, that is, the code becomes like this:

<Script>
Function test (){
Var input = document. getElementById ('number-input ')
If (input. value! = ''){
Input. value =''
  }
}
</Script>
<Input id = "number-input" type = "number">
<Input type = "button" onclick = "test ();" value = "TEST">
Then we will find that the problems encountered in the above Demo are successfully reproduced. The cause of the problem here should be obvious. We can also output the input. when the input is invalid (for example, a separate e), the obtained input is obtained. the value is null, so AnguarJS considers that the View and Model are no different and do not need to be updated.

Verify our ideas

It is also very easy to verify whether this is the cause. As long as we convert the View value to a valid value and then set Modle to null, we can see whether AngularJS can correctly clear the input box in this case:

Function Ctrl ($ scope ){
$ Scope. change = function (){
$ Scope. value = 0
$ Scope. $ apply ();
$ Scope. value = null
  }
}
As we expected, illegal input was successfully cleared this time.

Solution

Finally, the solution is to use the DOM operation to clear the input when the input is invalid. Although The DOM operation is not elegant, the DOM operation does not affect the relationship between the View and Model, angularJS originally thought that the VIew is empty at this time. (We can use input. validity. valid to determine the validity of input .)