Trigger a specific drop-down menu to appear upon selection of a radio button using AngularJS

Let me start by presenting my problem, accompanied by a simple piece of code:

<body>

    <div>   
        <input type="radio" name="salary"/>Per Year
            <select>
                <option value="0">All</option>
                <option value="40000">$40,000.00+</option>
                <option value="50000">$50,000.00+</option>

            </select>
    </div>


    <div>
      <input type="radio" name="salary"/>Per Hour
          <select>
                <option value="0">All</option>
                <option value="20">$20.00+</option>
                <option value="25">$25.00+</option>

            </select>
     </div
</body>

I am aiming to achieve a functionality where upon selecting the radio button with the "Per Year" value, the other radio button labeled "Per Hour" should be disabled, preventing users from choosing values from its dropdown list.

How can I implement this feature in AngularJS? Are there any directives available to assist in solving this issue?

Answer №1

Click here for the code snippet

<body ng-app="app">
  <div ng-controller="firstCtrl">
     <div>
        <input type="radio"  name="salary" ng-model="type" value="year"/>Per Year
            <select ng-model="year.value" ng-disabled="type =='hour'">
                <option value="0">All</option>
                <option value="40000">$40,000.00+</option>
                <option value="50000">$50,000.00+</option>

            </select>
    </div>


    <div>
      <input type="radio" name="salary" ng-model="type" value="hour"/>Per Hour
          <select ng-disabled="type =='year'" ng-model="hour.value">
                <option value="0">All</option>
                <option value="20">$20.00+</option>
                <option value="25">$25.00+</option>

            </select>
    </div>



      </div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

transfer properties to a dynamic sub element

I am currently working on a multi-step form project. I have successfully implemented the form so that each step displays the corresponding form dynamically. However, I am facing challenges in passing props to these components in order to preserve the state ...

Retrieve state in React without explicitly referring to it

let x = this.state.x; //initialized in the constructor: {number: 1} console.log(x); //Displays: {number: 1} x.number = 2; console.log(this.state.x); //Displays: {number: 2} Is there a way to modify x without affecting the value of state.x as a referen ...

The <select> element in AngularJS 1.5 is showing the dropdown at unexpected moments, but only on iOS 10 devices

From the title, it's evident that this bug is both intriguing and frustrating. The issue lies with a regular select element in an Angular partial containing the following code: <select ng-options="availweek.weekNumber as availweek.weekNumber for a ...

Rollup does not allow the use of self-written component imports in a component library

I am in the process of creating a personalized component library using my own components. However, I am encountering difficulties in the final stage of constructing the library using rollup. The current structure of my folders is as follows: ├── src ...

Repeat the most recent AJAX request executed

I am currently working on refreshing a specific section of my application which is generated by an AJAX call. I need to target the most recent call that was made and rerun it with the same parameters when a different button is clicked. The data was initial ...

Using Sweetalert2 to send data via AJAX POST request

Recently, I've been incorporating SweetAlert2 into my project and I want to create an "Add Note" feature. The process involves the user clicking a button, being directed to a page, and then the following script is executed: <script>swal({ ...

Vim: Turn off autocomplete when using insert mode key bindings

I've set up a mapping in insert mode to automatically indent brackets: inoremap [;<CR> [<CR>];<Esc>O<Tab> When I use it, the result looks like this (the pipe character represents the cursor): const a = [ | ]; Now, I want ...

The pageSize in React's Material Table does not reflect dynamic updates

Currently, I am attempting to implement pagination for material table data using TablePagination. One issue I am facing is that the pageSize property, initially defined as a state variable, does not update when the selected pageSizeOptions change. Despite ...

Enhance the speed of TinyMCE editor within an Angular application

Recently, I integrated tinyMCE into my Angular application using the latest (4.x) version of tinyMCE along with the newest release of angular-ui/ui-tinymce (https://github.com/angular-ui/ui-tinymce). All the code is now minified for improved performance. ...

Extension for Chrome - view source of current webpage

I'm attempting to develop my chrome extension to extract the current page source and identify the current URL, as seen in this example. If I were to visit https://www.google.com and the page source contains google I want my extension to display a ...

Error in PSQL: relation not found

I am encountering an issue while performing a get request with Express from my database and I'm unsure about its meaning. Below is a brief snippet of the error message: { error: relation "movies" does not exist at Connection.parseE Here is the c ...

How can the error within a promise be captured when using resolve()?

Check out the code snippet below: userUpdate(req: Request, res: Response) { this.userTaskObj.userUpdate(req.params.id, req.body).then(() => { res.status(200).json({ status: 'OK', message: 'User updated', ...

What is the best way to fix character encoding issues with native JSON in Internet Explorer 8

When working with JSON containing Unicode text, I encountered an issue with the IE8 native json implementation. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script> var stringified = JSON.stringify("สวัส ...

Having trouble getting the .replace() Javascript function to work on mobile devices?

I have a code snippet for implementing Google Analytics. Here it is: $(function () { $('.plan-choose-btn a').bind('click', function(e) { //ga load image <% String myaccGAEventUrl = trackGoogleAnalyticsEvent(requ ...

Establishing default parameters for angular pipes

Is there a way to establish default settings for an angular pipe without creating a custom one myself? I frequently utilize the currency pipe in this manner {{ price | currency:'EUR':'symbol':'0.2-2':'de' }} I&apo ...

Unable to display search results with AJAX in Select2

I'm struggling with getting the desired outcomes to display in Select2 when using AJAX. Below is my code: $(document).ready(function() { $("#producto").select2({ placeholder: 'Select a product', formatResult: productForm ...

Failure to build using the spread operator is unique to the Travis CI environment

I encountered an issue when running the build command npm run build locally for my website. However, on Travis CI, it fails with the following error: > node scripts/build.js /home/travis/build/PatrickDuncan/patrickduncan.github.io/node_modules/@hapi/ho ...

How should a JavaScript object be properly formatted?

Recently, I created a project using ng-repeat with AngularJS 1.x, and it was smooth sailing. JavaScript: var app = angular.module('myModule', []); app.controller('myController', function() { this.dishes = [ { 'name&a ...

What is the method for importing jQuery from a local source?

My experience with CDNs has been seamless, but I've run into some issues when trying to use jquery/jquery mobile locally. It seems that certain classes work intermittently, while others don't work at all. The versions I am using are: jQuery - ...

strategies for sharing data in Angular 2

Seeking advice on data sharing within various components of an Angular 2 application. At the moment, my app structure is similar to that shown in this tutorial, where the AppComponent is bootstrapped by Angular and multiple components are routed from there ...