AngularJS How can I disable ng-blur when ng-readonly is correct?
I am using AngularJS and ran into a problem when mixing ng-blur with ng-readonly. Although ng-readonly is set to true, ng-blur is still triggered (if you click on the input field and then click elsewhere).
In the sample, ng-blur still runs to make the counter increment.
http://plnkr.co/edit/cMQeVf2yJPG58CxS0eiB?p=preview
In app.js
$scope.counting = function(){
$scope.count++;
}
In index.html
<input
ng-blur="counting()"
placeholder="sample"
ng-readonly="true"
>
Question How can I disable ng-blur when ng-readonly condition is true?
source to share
You can just use boolean &&
in ng-blur
to call counting()
only if ng-readonly
is false
<input ng-init="checked=true"
ng-blur="!checked && counting()"
placeholder="sample"
ng-readonly="checked">
Alternatively, you can set the value ng-readonly
with ng-init
, or you can bind it to a checkbox.
Here plunkr
source to share