One the year is chosen, it will be automatically hidden and no longer available for selection

<div ng-repeat="localcost in vm.project.localCosts" layout="column">
         <md-select name="localcost_{{$index}}"ng-model="localcost.year" flex>
              <md-option ng-repeat="years in vm.getYears()" ng-value="years">{{years}}</md-option>
        </md-select>
</div>

The select box is generated for each item in the localCost array, resulting in multiple select boxes. The available years (e.g. 2015, 2016...) are populated dynamically.

My goal is to restrict the selection of a year once it has been chosen. To achieve this, I have implemented a function within the controller that retrieves the range of years based on start and end dates:

function getYears() {
       // Initialize start year
        var startYear = null;
        if ( angular.isDefined (vm.project.startDateObject._d) ) {
            startYear = parseInt(vm.project.startDateObject.format('YYYY'));
        }

       // Initialize end year
        var endYear = null;
        if ( angular.isDefined(vm.project.endDateObject._d) ) {
            endYear = parseInt(vm.project.endDateObject.format('YYYY'));
        }

        // Generate list of years
        if (startYear && endYear) {
            var years = [];
            for (var i = startYear; i <= endYear; i++) {
                years.push(i);
            }
            return years;
        }
}

Answer №1

To implement this functionality, you can call the ng-click method and pass the value of year. Then, iterate over the vm.getYears() object and set the isDisabled = true property for the found object.

After that, bind the ng-disabled attribute to the md-options element.

<div ng-repeat="localcost in vm.project.localCosts" layout="column">
     <md-select name="localcost_{{$index}}" ng-model="localcost.year" 
      ng-disabled="localcost.isDisabled" ng-click="selectYear(localcost.year)" flex>
        <md-option ng-repeat="years in vm.getYears()" ng-value="years">
           {{years}}
        </md-option>
     </md-select>
</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

Using setTimeout or setInterval for polling in JavaScript can cause the browser to freeze due to its asynchronous

In order to receive newly created data records, I have developed a polling script. My goal is to schedule the call to happen every N seconds. I experimented with both setTimeout() and setInterval() functions to run the polling task asynchronously. However ...

Why is the deployed Express server failing to establish a session?

After deploying a node express server on Digital Ocean, I encountered an issue where the session was not being created. To address this, I implemented a store to prevent memory leak and included app.set('trust proxy', 1) before initializing the s ...

Exploring the power of nested routes in React Router 4: accessing /admin and / simultaneously

I'm encountering an issue with nested routing. The URLs on my normal site are different from those on the /admin page, and they have separate designs and HTML. I set up this sample routing, but whenever I refresh the page, it turns white without any ...

Stopping React from re-rendering a component when only a specific part of the state changes

Is there a way to prevent unnecessary re-renders in React when only part of the state changes? The issue I'm facing is that whenever I hover over a marker, a popup opens or closes, causing all markers to re-render even though 'myState' rema ...

Leveraging jQuery for invoking PHP functions

Seeking guidance on running mysql queries through JQuery. Any recommendations or tutorials available? I am working on integrating a system with jquery mobile, using a mysql database as the backend. Are there any resources out there to help me understand h ...

"Enhancing security measures with multiple nonce for Content Security Policy

I am encountering an issue with my single page application, which is developed in .net core MVC 2.2. The application loads html sections on the fly. In the main document, I have added a Content Security Policy (CSP) policy with a dynamically generated hea ...

Access the value of a variable passed from the view to the controller

Is there a way to retrieve a dynamically generated value from the view to the controller in AngularJS? <ng-option ng-repeat="w in details track by $index"> <div class="program-grid-row table-row" > <div> <a class= ...

Refrain from using inline JavaScript code within your

Here is the basic structure of my code: <a href="javascript:void(0);" onClick="viewServices(1)">Services</a> <a href="javascript:void(0);" onClick="viewServices(43)">Services</a> <a href="javascript:void(0);" onClick="viewServic ...

Ways to extract information immediately after using the .load method

Is there a way to instantly store data from .load in JavaScript? Whenever I use .load within a JavaScript function to retrieve content from the server and display it on the browser page, the content does not update immediately. It's only when the fu ...

To enhance user experience, consider incorporating a 'Next Page' feature after the completion of every four paragraphs,

Here is a code snippet that can be used to print 'n' number of paragraphs: <% while(rs.next()){ String para=rs.getString("poems"); %> <p> <%=para%> </p> <!-- n number of p tags are printe ...

"Vue is failing to actively update an input that relies on changes from another

I am working on a project where the selected country automatically determines the phone country code. I have set it up so that when I change the country, the corresponding country code should update as well. Within a customer object, both the country and ...

View real-time data in Vuejs 3 as it executes

I am currently working on a form that populates a table with data retrieved from a Laravel API. I am using Vue.js 3 and Composition API to build my entire application. When the button is clicked, I want the table to be filled with data from the form. The b ...

Empty the localStorage when terminating the IE process using the Task Manager

Utilizing HTML5 localStorage to keep track of my application session has been a useful feature. Here is a snippet of the code I am currently using: if(typeof(Storage)!=="undefined") { if(sessionStorage.lastname=="Smith") { alert("Your ses ...

Enlarge the DIV element along with its contents when those contents have absolute positioning

When attempting to overlay two divs like layers of content, I encountered a challenge. Because the size of the content is unknown, I used POSITION:ABSOLUTE for both divs to position them at the top left of their container. The issue: The container does no ...

Handling Errors: Communicating with the Frontend

I'm facing a challenge with error handling in my authentication API calls. Whenever I trigger the 500 status from Express, my frontend (using Vue) only displays the message Request failed with status code 500 instead of something more informative like ...

Develop a precompiled library for Angular applications that utilizes Ahead-of-Time (AOT) compilation technology

My Angular 5 library is packaged for consumption by other apps in their node_modules. Currently, the app is compiled Just-in-Time(JIT) using rollup and gulp. I export it as a package, and developers use it in its JIT compiled form. After researching AOT ...

How can we utilize the transformRequest feature to convert a string into a functional output while making an $http.get

I am currently facing an issue with my web app when sending an $http.get request. The response is a plain-text string that looks like "Hello!" instead of JSON format. I do not want to make changes to the back-end, so I am exploring options to modify the tr ...

Issue with specific route causing server to throw 500 error

Recently, I have been working on a small school project that involves creating our own API and connecting it to an Angular front end. While following some tutorials, I encountered an issue where my application started throwing internal server error 500 af ...

Maximum Age Setting for Iron Session Cookie

Currently, I am attempting to configure a Next JS application with iron-session and a 'remember me' feature. The objective is for the maxAge of the iron-session cookie to be extended to a week if the user selects the remember me option on the log ...

Retrieving data from MySQL through AJAX does not yield any information

I have been following a tutorial from W3 schools on PHP and AJAX database. Majority of the content is working fine, however it seems that there is no data being retrieved from the MySQL database I created called "exercises" in the "exercisedb" database. B ...