Is it possible to prevent the selected option from being available in other select lists using AngularJS?

Can anyone help me figure out how to disable an option in one select list when it is selected in another using AngularJS? I have set up a select list for From Year and To Year with ng-repeat, which is working fine. Now, I just need to implement the functionality where selecting an option in one list disables that option in the other list. Any ideas on how to achieve this?

Thank you in advance!

Here is the HTML code:

<li> 
    <select class="form-control">
        <option value="" selected disabled>From Year</option>
        <option ng-repeat="option in selectedYear" >{{option.years}}</option>
    </select>
</li>

<li>
    <select class="form-control">
        <option value="" selected disabled>To Year</option>
        <option ng-repeat="option in selectedYear" >{{option.years}}</option>
    </select>
</li>

And here is the JSON data:

{"json1":"[{\"years\":2018},{\"years\":2017},{\"years\":2016},{\"years\":2015}]
javascriptangularjsangularjs-select

Answer №1

Execute the code below and confirm if it meets your requirements

angular.module("app", [])

  .run(($rootScope) => {

    $rootScope.selectedYears = []

    $rootScope.years = [{
      "years": 2018
    }, {
      "years": 2017
    }, {
      "years": 2016
    }, {
      "years": 2015
    }]
  })
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
  <li>
    <select class="form-control" ng-model="selectedYears[0]">
      <option value="" selected disabled>From Year</option>
      <option ng-repeat="option in years"
              ng-disabled="selectedYears.indexOf(option.years) !== -1 && selectedYears.indexOf(option.years) !== 0"
              ng-value="{{option.years}}">
        {{option.years}}
      </option>
    </select>
  </li>

  <li>
    <select class="form-control" ng-model=selectedYears[1]>
      <option value="" selected disabled>To Year</option>
      <option ng-repeat="option in years"
              ng-disabled="selectedYears.indexOf(option.years) !== -1 && selectedYears.indexOf(option.years) !== 1"
              ng-value="{{option.years}}">
        {{option.years}}
      </option>
    </select>
  </li>
</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

Tips for utilizing two renderCell functions in a datagrid from Material UI without encountering duplication or repetition

Utilizing Material UI, I have designed a table to showcase my data. In this setup, I am required to use renderCell for two specific properties: 'level by user' and 'level by referent'. Issue: The problem arises when Material UI displa ...

javascriptreactjsmaterial-uidatagrid

Retrieve the direction of panning when the panning stops with hammer.js and limit the possible

I have integrated the hammer.js library along with its jQuery plugin. I followed the documentation and used the following code to initialize it on .game-card-mobile divs: /* Creating a Hammer object for swipeable game cards */ var $gameCard = $('.gam ...

javascriptjqueryhammer.js

What is the most effective way to assign multiple functions to the onClick event of a button, based on a specific property,

I have a special button that generates a specific type of code when rendered: <button>{this.props.text}</button> This button is named ButtonCustom. In the render method of the main container, I am trying to achieve the following: function my ...

javascripthtmlreactjs

Problem with Jquery Colorbox in firefox

I am using JavaScript to dynamically populate anchor links in a repeater and displaying them in a colorbox iframe. This functionality is working well in IE7, Safari, and Chrome, but encountering an issue in Firefox (version 14.1). In Firefox, the links ar ...

javascriptjqueryasp.netcolorbox

Getting around CloudFlare's 100-second time-out restriction

Seeking a solution to AJAX-enable my reports and circumvent the 100-second time-out constraint enforced by CloudFlare for requests passing through its platform. For more information, visit Is it possible to increase CloudFlare time-out? The implementatio ...

javascriptajaxasynchronoustimeoutcloudflare

The assignment of type 'string' to type 'UploadFileStatus | undefined' is not permissible

import React, { useState } from 'react'; import { Upload } from 'antd'; import ImgCrop from 'antd-img-crop'; interface uploadProps{ fileList:string; } const ImageUploader:React.FC <uploadProps> ...

javascripttypescript

Ways to utilize ng-options for looping through an array inside an object?

How do I utilize ng-options to fill a select element with the content of the "categories" arrays inside the objects? { title: "Star Wars", categories: ["Technology", "Adventure", "Coding"] }, { title: "Street ...

javascriptangularjs

ParcelJs is having trouble resolving the service_worker path when building the web extension manifest v3

Currently, I am in the process of developing a cross-browser extension. One obstacle I have encountered is that Firefox does not yet support service workers, which are essential for Chrome. As a result, I conducted some tests in Chrome only to discover tha ...

javascripttypescriptgoogle-chromeparceljsweb-extension

Trigger a click event on a dynamically loaded button

Here's a unique twist to the usual discussions on this topic. I have a dynamically loaded button in my HTML, and I've saved the selector for it. Later on in my code, I need to trigger a click event on this button programmatically. The typical $(& ...

javascriptjqueryhtmldom

Automatically numbering table columns with custom language localization in JavaScript using Jquery

Is there a method to automatically number table data in a local or custom language? As a Bengali individual, I have figured out how to automatically number the first data of each row using css and js. However, I am uncertain about how to implement custom n ...

javascripthtmljquerycss

Working with double quotes within variable in JavaScript

I am currently working on dynamically creating HTML tags using JavaScript. Please take a look at the code snippet below: function getPhotosSuccess(data) { if (data.d.results.length > 0) { var response = data.d.results; var innerht ...

javascripthtml

Content formatted with a gap

I wish to include a gap between each sample usage with markdown. For instance: .kick Sarah, .kick John, .kick Mary .setDescription(`**Usage :** \`${settings.prefix}${command.help.name} ${command.help.usage}\`\n**Example :** \`${setting ...

javascriptnode.jsdiscorddiscord.jsmarkdown

Unexpected package version changes occurring due to bower install

I am currently using bower 1.3.12 Here is the content of my bower.json file: { "name": "my_project", "version": "0.0.0", "authors": [ "ME <<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="660b0326030b070f0a4805090b ...

angularjsbowerbower-install

When using Angular $HTTP, CORS is supported when working with application/x-www-form-urlencoded, but there is a problem with OPTIONS 404

I have successfully implemented a Node + ExpressJS with CORS setup using this middleware. However, I am facing issues when working with POST requests. Here is what works: $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"; ...

node.jsangularjsexpresscors

using java to invoke a server-side function within a mapReduce operation in mongodb

i have saved two functions in the "system.js" collection under the names "mapfun" and "reducefun" and now i am attempting to invoke these functions from Java. I am trying to utilize MapReduceCommand for this purpose but encountering difficulties in calling ...

javascriptjavamongodbmapreduce

Injecting dynamic variables into JSON objects using JavaScript

I am facing a challenge with populating values dynamically from an array of elements. Below is the primary array that I am working with. list = [{name: 'm1'}, {name: 'm2'},{name: 'm3'},{name: 'm4'},{name: 'm5&ap ...

javascriptarraysjsonvue.js

Tips for obtaining results from a File Reader

I am currently facing an issue with an onchange event in my HTML. The event is intended to retrieve an image from the user, convert it to a data URL, and then send it over socket.io to store in the database. However, I am struggling to figure out how to ac ...

javascriptangularfilereader

Issue with activation of onClick event in case/switch statement

Currently working on a JavaScript project to recreate the Fallout terminal game, with one of the main aspects being comparing words selected by the user to those chosen by the computer. The concept of this hacking game is reminiscent of the board game Mas ...

javascripthtmlfunctiondomswitch-statement

After refreshing the page, the console log within the React useEffect function ceases to function

Incorporating the 'useEffect' function to fetch data and store it in the 'ratings' array has proven successful. However, there seems to be an issue when attempting to iterate through the elements of the 'ratings' array for log ...

javascriptnode.jsreactjsreact-hooks

What is the most effective method for obtaining only the "steamid" from an AJAX request (or any other method)?

I have been attempting to extract only the "steamid" from an AJAX link without success. Could someone please provide some assistance? Here is the link to find and retrieve only the "steamid": here This is the code I have tried: var xhttp = new XMLHt ...

javascriptajax