What is the best method to deactivate additional choices and add inputs to several dropdown menus containing identical values using angular js?

Would like to have 3 dropdown lists with identical values. The first dropdown must be selected, while the other two are optional.

All three dropdowns will have the same options. If a user selects an option in dropdown 1, it will become disabled for the remaining dropdowns. Once all three dropdowns are selected, the chosen values will be displayed as text on the same page. This text will then be saved into the database under the field "selected_option."

Struggling with this Angular concept as a beginner. Any guidance would be appreciated :(

The following code is from my view:

          <div class="row form-group">
           Selected:
           Dropdown 1 : <select class="form-control" ng-model="selected_option[0]" 
ng-options="option.value as option.text for option in params">
           </select>
        </div>
        <div class="row form-group">
           Selected:
           Dropdown 2 : <select class="form-control" ng-model="selected_option[1]" 
ng-options="option.value as option.text for option in params">
           </select>
        </div>
        <div class="row form-group">
           Selected:
           Dropdown 3 : <select class="form-control" ng-model="selected_option[2]" 
ng-options="option.value as option.text for option in params">
           </select>
    
    {{ selected_option }}
        </div>

This part belongs to my controller:

 $scope.selected_option = [];
  $scope.params= [
                                {value: "A", text: "A"},
                                {value: "B", text: "B"},
                                 {value: "C", text: "C"},
                               
                            ];

Answer №1

Try using ng-repeat instead of ng-options to show all options. Additionally, you can utilize ng-disabled to deactivate certain options.

<div class="row form-group">
    Selected:
    Dropdown 1 : 
    <select class="form-control" ng-model="selected_option[0]">
        <option ng-repeat="option in params" ng-value="option.value">{{ option.value }}</option> 
    </select>
</div>
<div class="row form-group">
    Selected:
    Dropdown 2 : 
    <select class="form-control" ng-model="selected_option[1]">
        <option ng-repeat="option in params" ng-value="option.value" ng-disabled="option.value == selected_option[0]">{{ option.value }}</option> 
    </select>
</div>
<div class="row form-group">
    Selected:
    Dropdown 3 : 
    <select class="form-control" ng-model="selected_option[2]">
        <option ng-repeat="option in params" ng-value="option.value" ng-disabled="option.value == selected_option[0] || option.value == selected_option[1]">{{ option.value }}</option> 
    </select>
    {{ selected_option }}
</div>

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

Viewing a PDF within a MUI tooltip

Currently, I am facing an issue where I am attempting to show a preview of a PDF file inside a Material-UI (MUI) Tooltip when a user hovers over a MUI ListItem. While I have successfully displayed previews of PNG and JPG files using Next.js' Image com ...

TypeScript error: Attempting to access 'Push' property of an undefined value

When attempting to add to an array in Typescript within an Ionic2 application, I encounter an error stating that the array is undefined despite having declared it. I have tried declaring it using two different methods with no success. The declarations used ...

Run the js.erb code only when a certain condition is met

I'm feeling a bit lost when it comes to CoffeeScript and JS. I have a quick editing feature that sends an AJAX request and updates the database. Currently, I manually change the edited content's place and display it, but it feels like a workaroun ...

the buttonclick won't pause the timer

I'm having trouble with the timer function when a button is clicked. The startpause() method sets the start and stop timers, but when I click the button rapidly multiple times, the timer starts to jump by 2-3 seconds. It seems like more than one timer ...

The categorization of items into arrays according to selections made with radio buttons is producing varied outcomes

I currently have two groups of radio buttons: One for attendance with values "yes" and "no" Another for dietary choices with values "Vegetarian / Vegan" and "Non-vegetarian" The dietary fields are only displayed if the user selects "yes" for attendance. ...

What is the best way to change a javascript string into HTML so that it can be shown in a form?

I am struggling to find a solution to this issue. I am fairly new to jQuery and JavaScript, so please forgive me if my question seems basic. I am trying to call a cfc (ColdFusion) using jQuery and retrieve HTML data. However, when I receive the data, it ...

"Is it possible to access variables declared in the main app.js file from separate route files in Node.js Express 2.5.5 and if so

Recently, I've started using the latest version of Express (2.5.5) which now automatically creates a ./routes directory in addition to ./views and ./public In the routes directory, there is an index.js file that includes: /* * GET home page. */ e ...

Extracting information from Javascript on an HTML webpage

The text snippet provided is a segment of an HTML page. I am looking to extract the data but unsure about the most effective method to do so. JSON would be ideal, however, I am uncertain if this content can be converted into JSON format. Is Regular Expre ...

Issue with Material-UI: Inability to Activate the onChangeCommitted Event while Testing

I am encountering issues while testing the onChangeCommitted event with the slider from Mui. I have set up a basic implementation of the slider in a code sandbox environment. You can view the code in this sandbox. The main problem lies in my inability to ...

What is the best method for removing all HTML tags except the <p> tag when pasting

Having a bit of trouble with my inline text editor. Users are able to copy and paste onto the textarea div, which is fine. However, I don't want them pasting HTML content with images or div elements. I've tried using valid_elements: "p,br,b,i, ...

Why don't updates made in the database reflect in real time?

Currently, I am diving into the world of Firestore's real-time functionality. Below is a snippet of my code where I am fetching data: useEffect(() => { let temp = []; db.collection("users") .doc(userId) .onSnapshot((docs) =&g ...

Error: The function onSelectChange is not defined in this.props

Currently, I am attempting to connect a state from the Parent component App.jsx class App extends Component { constructor() { super(); this.state = { select: '', }; this.onSelectChange = this.onSelectChange.bind(this); ...

What is the best way to trigger a jQuery function when an option is selected from a Select2 dropdown menu?

I have implemented Select2 for custom dropdown styling. The options are structured like this: <option value="001,100">Option 001</option> <option value="002,200">Option 002</option> <option value="003,300">Option 003</opti ...

Is there a way to retrieve both the name of the players and the information within the players' profiles?

Just dipping my toes into the world of Javascript and jQuery while attempting to create an in-game scoreboard for Rocket League, I've hit a bit of a roadblock. Here's the console log output of data from the game: I'm particularly intereste ...

Basic data binding does not involve value interpolation

Embarking on a new project, I decided to dive in with some simple one way binding to ensure the controller was properly connected for the view to access the variables. At first, I had the controller stored in a separate JavaScript file and it just was ...

Activate a disabled element in Vue.js Datepicker

In my scenario, there are 2 instances of the <date-picker>. The first instance is used for capturing the start date (starts_at), while the second instance captures the end date (ends_at). According to the design I have envisioned, I would like to in ...

What is the best way to choose an Animatedmodal that can showcase various demos while using just one ID?

I am currently customizing my website and utilizing the AnimatedModal.js framework. I have successfully displayed content in one modal, but encountered difficulty when attempting to create multiple modals as they all share the same ID. My question is, how ...

Ways to incorporate onload animation into a Pie chart with billboard js

I am currently working on implementing a pie chart with animation using billboard js. However, I am facing difficulties in applying the onload animation. Can anyone provide guidance on how to achieve this? For reference, you can view an example of the des ...

Tips for utilizing ngDoc comments in routeConfig

I am currently working on documenting my Angular WebApp using ngdocs and grunt. I am facing a challenge with the complexity of my routing system and feel that it needs more attention in terms of documentation. Is there a way to document the route configur ...

How can I include an md-icon in an md-button within node-red-dashboard?

As a beginner in node-red, dashboard, AngularJS, and the pre-installed icons in the node-red dashboard, I humbly ask for guidance. My goal is to create custom buttons with icons using the dashboard template node. Based on the example provided in the inform ...