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?

Answer 1

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

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