How to make a input disabled by default using angular directives

Question

How do I make a textual input field disabled by default and have it toggled using a checkbox. I am getting the checkbox to toggle the input field between an enabled and a disabled state but I cannot get the input field to be disabled by default even though I set the checkbox to true when the page loads.

I tried this method but it doesn't disable the input field until I toggle the checkbox to off and on:

<input type="text" ng-disabled="restaurant.valid_shortname" ng-model="restaurant.shortname" >
<input type="checkbox" ng-model="restaurant.valid_shortname" ng-checked="true"/>

What I would like to do is have the checkbox checked when the page loads which as a reseult disables the input field

score 2 · Accepted Answer · edited Jun 22 '18 at 16:57

2

from the docs of ng-checked:

Note that this directive should not be used together with ngModel, as this can lead to unexpected behavior.

The correct way would probably be to set the restaurant.valid_shortname to true inside your controller. You could use ng-init as well if you insist on doing it in your template. That would look something like this:

<input ng-init="restaurant.valid_shortname = true" type="text"
       ng-disabled="restaurant.valid_shortname"
       ng-model="restaurant.shortname" >
<input type="checkbox" ng-model="restaurant.valid_shortname"/>

edited Jun 22 '18 at 16:57

georgeawg

48,608
13
72
95

answered Nov 25 '16 at 00:57

Pevara

14,242
1
34
47

Thanks a lot, that's exactly what I was looking for. Was avoiding doing it in my controller to be honest. Completely forgot about ng-init. – Courtney Nov 25 '16 at 01:03

How to make a input disabled by default using angular directives

1 Answers1