AngularJS - creating cascading dropdowns from a single data source

Could someone please help me create something similar to this example: http://jsfiddle.net/PR6FM/, but using AngularJS?

    <div ng-repeat="newCar in myCars">
        <select ng-model="newCar.carId" ng-options="car.carId as car.name for car in cars | filter: {'carId': '!'+myCars[$index-1].carId}"></select>
    </div>
    <button type="button" ng-click="myCars.push({'carId':myCars.length+1, 'name': "someName"})">ADD</button>

I am trying to filter out previously selected cars from the list when adding new select boxes.

I understand that the current filter:

filter: {'carId': '!'+myCars[$index-1].carId}

may not be the best approach, but it's a starting point.

Answer №1

Check out this example on a code sharing platform: http://jsfiddle.net/jarydcarolin/aLyzn30m/1/

$scope.carArray = function (index) {
   var cars =  ['Renault', 'Holden', 'Ford','Dodge'];
   return cars.filter(function (el) {
       return ($scope.resultArray.map(function(e){return e.car}).slice(0,index).indexOf(el) === -1)
   })
}

The idea presented here is to establish the number of cascades needed separately from the available options. By using empty objects, there is a smoother binding through ng-repeat compared to a regular array setup.

To make each options list adaptable, a function is utilized to generate the array based on the SELECT index within the cascade. By keeping the logic centralized in this way, consistency in behavior across scopes is maintained.

Answer №2

Experiment with this approach:

<div ng-repeat="vehicle in carsList | -carId">

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

Top method for showcasing animated images (HTML/CSS/JS)

For my website, I want to create an engaging animation showing a coin being flipped multiple times in the air before landing on a specific side. After the animation finishes, I would like it to transform into a static image of the final result. I've ...

Troubleshooting the issue: JavaScript's Time comparison failure with JSON versus Local time

Dealing with JSON data like the following: [ { "hourly_AQI": 73.0, "hourly_date": "Tue, 31 Oct 2023 11:00:00 GMT" }, { "hourly_AQI": 79.0, "hourly_date": "Tu ...

How to determine if an Angular list has finished rendering

I am facing an issue where I have a large array that is being loaded into a ul list using ng-repeat in Angular. The loading of the list takes too long and I want to display a loader while it's loading, but hide it only when the ul list is fully render ...

Tips for dynamically loading JSON data in Pug and JavaScript by implementing scroll functionality

This is my pug file for specificBike in allBikeData .bikeshop-card.border.border-dark.bg-white.m-3.p-4 li img.shop-image.border.border-dark(src=specificBike.image, onerror="this.onerror=null; this.src=&a ...

Navigating without the need for a mouse click

Is there a way to automatically redirect without user interaction? I need the redirection to happen without clicking on anything <script> setInterval(function(){ window.location.replace("http://your.next.page/"); }, 5000); // Redirec ...

Leverage the Axios package to make requests within a for loop

I'm new to JavaScript and currently working on a project using Vue.js, Axios, and the API available at . The goal of this project is to retrieve NBA player statistics for a homework assignment. I could use some assistance in addressing certain issues. ...

Pattern for identifying Google Earth links with regular expressions

I'm attempting to create a regular expression that can validate whether the URL entered by a user in a form is a valid Google Earth URL. For example: https://earth.google.com/web/@18.2209311,-63.06963893,-0.67163554a,2356.53661597d,34.99999967y,358.13 ...

Using a local function within Node.js and referencing it with the <%%> tag in a document

I am currently working with Node.js and attempting to utilize a local function within a document that requires the JSON I send in the res.render. Is there a method to achieve this? Below is an example of how I attempted to implement it: <%local_vari ...

Exchange the draggable elements between distinct div containers while keeping them in their original positions

Attempting to create an example showcasing Draggable jQuery with Bootstrap, everything is functioning smoothly so far. However, there are two things I am aiming to achieve: Swap the divs <div class='col-sm-12'></div> that were gen ...

Automatically selecting the map center while using the Drawing Manager feature for placing markers

My application utilizes the Google Drawing Library. When a user clicks on the Add New Marker Button, the Drawing Manager is activated allowing the user to generate a marker by clicking anywhere on the map. Subsequently, the following listener is executed: ...

Utilizing jQuery AJAX to Send an HTML Array to PHP

In my current HTML forms and jQuery AJAX workflow within the Codeigniter Framework, I've encountered a common issue that has yet to be resolved to suit my specific requirements. Here's the situation: HTML - The form includes an array named addre ...

Utilize jQuery's .append() function to dynamically insert content into your webpage

I currently have tab elements set up like this: <div class="tab-pane fade active in" id="tab-a"> </div> To populate the content of that tab with a JavaScript string array, I am using the following code snippet: var full_list = ""; for (var ...

Limiting jQuery datepicker to only show the selected date and disabling all others

I have two datepickers named startdate and enddate. My goal is to restrict all other dates in the enddate datepicker except the selected date from the startdate datepicker. For instance, if I choose 15/12/2016 from the startdate datepicker, I only want the ...

Different methods to retrieve content within a div that is located on a separate, included page

It's a bit tricky to come up with a title for this topic, but essentially, I'm trying to figure out how to get content from an included page into a specific div using HTML and PHP. Let me break it down: In the header.php file, we have the follo ...

Scrolling horizontally in a container using the mouse wheel

Is there a way to enable horizontal scrolling in a div using the mouse wheel or drag functionality with jQuery? I attempted using draggable, but it did not work effectively in my specific code scenario. Currently, I have a horizontal scrollbar. Are there ...

"Encountering a delay in the passport authentication callback process

After multiple attempts to solve this issue independently, I have turned to the Stack Overflow community in search of guidance. I am implementing user authentication using passport. It has already been initialized in my main express.js file following the ...

Is there a streamlined approach to reducing the code for an Angular Bootstrap card with a fixed length and height?

Is there a more efficient way to distribute a fixed number of cards with fixed dimensions in three rows? Currently, I am manually coding all 33 cards spread across 3 rows - 11 cards per row. Please excuse any mistakes in my code as I am still a beginner a ...

The debate between importing images and including them inline in NextJS is a hot

When using NextJS, what sets apart importing an image from directly including it with next/image? import logo from './logo.png'; <Image src={logo} /> /* versus */ <Image src={'/logo.png'} /> (This is pseudocode meant for ...

Unravel the HTML entities using jQuery

Is there a way to decode HTML entities using jQuery similar to the PHP function htmlspecialchars_decode? Here is the code I am currently using: if (jQuery.trim(jQuery("#push_alert").val()) != "") { alert = jQuery("#push_alert").val(); } Whenever the ...

Discovering the Voice Channel of a User using Discord.js v13

I'm currently working on a 'wake up' command for my bot that should move the mentioned member between 2 specific voice chats and then return them to their original VC. I've successfully got the bot to move me between those 2 VCs, but no ...