A guide to activating an input field based on the value of another input field in AngularJs

Question

A guide to activating an input field based on the value of another input field in AngularJs

An AngularJs form requires the user to input the number of hours worked. If the value entered is 0, an additional question should be displayed for the reason why no work was done.

<label>Hours worked:</label>
<input ng-model="hours" type="number" placeholder="8" />

<label ng-class="{'disabled-label': ifHoursZero}">Reason for not working:</label>
<input ng-disabled="ifHoursZero" ng-model="reason" type="text" />

How can CSS and input fields be toggled elegantly in Angular based on the value of hours, specifically when it is equal to 0? Is there a pattern or method that directly links this behavior to the hours variable?

javascript angularjs

Answer 1

Answer №1

Create a function named checkIfHoursZero that will return a boolean value. Use it in your code as ng-disabled="checkIfHoursZero()"

Here is an example implementation:

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

Check out this jsBin link for more details.

Answer 2

Create a function named checkIfHoursZero that will return a boolean value. Use it in your code as ng-disabled="checkIfHoursZero()"

Here is an example implementation:

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

Check out this jsBin link for more details.

Answer 3

Answer №2

Completing this task should not require adding a function to the controller:

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

<div ng-show="hours === 0">
  <label>What was the reason for not working at all?</label>
  <input ng-model="reason" type="text" />
</div>

Answer 4

Completing this task should not require adding a function to the controller:

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

<div ng-show="hours === 0">
  <label>What was the reason for not working at all?</label>
  <input ng-model="reason" type="text" />
</div>

A guide to activating an input field based on the value of another input field in AngularJs

Answer №1

Answer №2

Similar questions

Using ng-repeat to asynchronously load background images from a specified URL

Initiate an animation in Wordpress once the entire page has finished loading

What is the best way to add or modify a timestamp query string parameter?

Struggling to make $http post requests to PHP using Angular

Unexpected output from the MongoDB mapReduce function

What is the best way to fetch all the orders from my product schema using response.send?

Oops! It seems like there's a problem with reading the 'strEmail' property of undefined. Do you have any ideas on how to fix this issue

Oh no, Angular is giving us trouble!

Is it possible to manipulate a modal within a controller by utilizing a certain attribute in HTML, based on specific conditions (without relying on any bootstrap services), using AngularJS?

What error am I making in the Date calculator for the select box using Javascript/jQuery?

Is it possible to incorporate variables when updating an array or nested document in a mongodb operation?

search for the compose function in the material table within a react component

What's the best way to adjust text color to black or white for maximum contrast when the background changes?

TypeScript React Object.assign method return type

Dynamically adjust row height in AG Grid within an Angular application based on the visibility of other columns

Toggle element visibility upon clicking

Encountering Babel issues while incorporating npm package into React Native project

Choose the camera when utilizing the navigate.getUserMedia() function

Is there a way to retrieve the chosen selection from a select dropdown element using JavaScript?

When attempting to render 2 components based on the results of 2 fetch calls using Promise.allSettled(), I encounter difficulties if one of them throws an error