How to enable input field based on another input field value in AngularJs

Question

I have an AngularJs form where I want to know the amount of hours worked. If the amount is 0, I want to enable an extra question for the reason of not working.

<label>How many hours did you work?</label>
<input ng-model="hours" type="number" placeholder="8" />

<label ng-class="{'disabled-label': ifHoursZero}">Why didn't you work at all?</label>
<input ng-disabled="ifHoursZero" ng-model="reason" type="text" />

What is the elegant Angular way to toggle CSS and input fields with ifHoursZero if the hours value is 0. Can this be done directly with the hours variable with some pattern?

you could use ng-show and ng-hide

Paul Fitzgerald
– Paul Fitzgerald

2015-05-04 13:50:16 +00:00
Commented May 4, 2015 at 13:50 — Paul Fitzgerald
– Paul Fitzgerald, Commented May 4, 2015 at 13:50

Tom · Accepted Answer · 2015-05-04 13:57:20Z

2

Make ifHoursZero a function that returns a boolean and call it like ng-disabled="ifHoursZero()"

For example:

function ifHoursZero() {
    return $scope.hours === 0;
}

See jsBin

edited May 4, 2015 at 13:57

answered May 4, 2015 at 13:51

Tom

7,7401 gold badge26 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Charlie Wynn · Accepted Answer · 2015-05-04 14:07:32Z

2

You should be able to do this without having to add a function to the controller:

<label>How many hours did you work?</label>
<input ng-model="hours" type="number" placeholder="8" />

<div ng-show="hours === 0">
  <label>Why didn't you work at all?</label>
  <input ng-model="reason" type="text" />
</div>

answered May 4, 2015 at 14:07

Charlie Wynn

9331 gold badge8 silver badges23 bronze badges

3 Comments

Pekka Over a year ago

Does the reason variable bind at all if the ng-show hides it? And what if it shows it (by entering 0) and then hides it again (by entering >0)? Does it affect to its default scope values?

Charlie Wynn Over a year ago

@Pekka it should be there hidden or not.. (enter 0 hours, type something, change hours to 1, reason should still be there) So in your controller you might want to check hours depending on what you're doing with reason.

Pushp Singh Over a year ago

what you have mentioned is about showing and hiding input field and not enabling or disabling it !

Collectives™ on Stack Overflow

How to enable input field based on another input field value in AngularJs

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related