What is the best way to populate a dropdown menu by matching keys from an array within an ng-repeat

My JSON structure looks like this:

101 :
     "List": [
      {
        "Name": "Pink"
      },
      {
        "Name": "Black"
      }
    ]

102 :
     "List": [
      {
        "Name": "Red"
      },
      {
        "Name": "Yellow"
      }
    ]

$scope.Ids = [101,102,103,104];

Currently, I am using an ng-repeat loop to iterate over the list of IDs (for example: 101,102) and my goal is to populate a dropdown based on a specific ID. For instance, for ID 101, I want to populate Pink and Black, and for ID 102, I want to populate Red and Yellow in the dropdown. For the rest of the IDs, I want to ignore them altogether. However, I am struggling to figure out how to achieve this.

Here's the code snippet:

<div ng-repeat="item in Ids track by item.id">
  <select ng-model="color" ng-options="">
         <option value="">-- choose color --</option>
      </select>
</div>

Answer №1

If we imagine the dropdown map being saved in an object: $scope.map:

<div ng-repeat="id in Ids">
  <select ng-model="color" ng-options="opt.name for opt in map[id].list"></select>
</div>

Answer №2

<div ng-repeat="item in Items">
  <input type="text" ng-model="name" placeholder="Enter a name">  
</div>

Remember, simplicity is key!

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

Passing data from an Express middleware to a Jade template

My KeystoneJS app is all set up, using Express and Jade. The default.jade file sets up a fullscreen background image along with various imports, the header, and footer of the site. I am attempting to rotate the image based on a selection of images stored ...

Encountering issues with the functionality of async await

I am a beginner when it comes to utilizing the async, await, and promise features in JavaScript. My current focus is on: async function sendTextMessage(text) { console.log("----1----"); var messageData = { message: { text: tex ...

Encountering issue with jQuery - Ajax causing error 500 for select posts

Recently, I encountered an issue with the Ajax functionality on a live website. It was previously working perfectly fine, but suddenly started returning a 500 internal server error instead of the expected page. Oddly enough, I discovered that I could stil ...

The sequence of indices in a for loop and making Ajax requests

I'm dealing with a challenge related to executing ajax requests within a for loop. Despite researching solutions online and implementing them to prevent synchronous request execution, I still face an issue in maintaining the correct order of the succe ...

The issue persists with the JavaScript window.location script constantly refreshing

I am currently working on a small web application where I want to update 2 parameters in the URL using Javascript. However, every time I use "window.location.search = 'scene.html?name=' + person + '&scene=' + readCookie("scene");", ...

The absence of localStorage is causing an error: ReferenceError - localStorage is not defined within the Utils directory in nextjs

I've been trying to encrypt my localstorage data, and although it successfully encrypts, I'm encountering an error. Here's the code snippet (./src/utils/secureLocalStorage.js): import SecureStorage from 'secure-web-storage' import ...

Error throwing when attempting to use additional plugins in Angular CKEditor

I have been attempting to utilize the angular ckeditor extension found at: https://github.com/lemonde/angular-ckeditor UPDATE: I have already injected 'ckeditor' into the app modules. Within my partial html, I am including the following direc ...

Building a table using jQuery and adding elements using JavaScript's append method

Greetings! I've been attempting to add new records from a form that registers or updates student information, but unfortunately it doesn't seem to be functioning correctly. Can anyone point me in the right direction as to why this may be happenin ...

ng-view scope interacting with parent scope connection

Excuse the late-night desperation, but I have a question about my AngularJS application that uses ngRoute. Currently, everything is being handled in one controller. The issue arises with a form in a view where I need to take the input field data and store ...

Creating a polygon path in Google Maps v3 using an array of coordinates

I'm currently working on creating a polygon around US counties. The coordinates for this polygon are coming from a database and then being json encoded for use in JavaScript. Below is the JSON encoded array generated from PHP code: {"Abbeville-sc":[[ ...

Why does the <select> dropdown flash when I select it?

Currently utilizing Angular 1.3 and Bootstrap 3.3.x CSS without the JS functionality. There is also an interesting animated GIF embedded within. <div class="form-group"> <div class="col-lg-3"> <label clas ...

Adding div elements using checkbox switch

In this code snippet, my aim is to display costs based on checkbox selection and generate corresponding totals in the bottom row when the checkboxes are toggled. The goal is to allow users to choose relevant items and have the total cost calculated accordi ...

Running a PHP function within a PHP environment

After the user clicks the submit button and no errors are present, a token value input is generated in the script below. The goal is to post this value inside a php page for use in a query. While the input value is successfully generated, posting it to the ...

The second tab on Bootstrap5's tab content feature seems to generate an endless amount of white

I am working on a project where I need to display statistics for both the current month and year. To organize this data, I created a card with tabs for each - one tab for the month and another for the year. By default, the month tab is loaded first. Howev ...

How can I utilize Md-dialog with Selenium?

I'm encountering a problem with a md-dialog pop-up within an angularJS application that I can't interact with using selenium. Whenever I click a button, the dialog box appears and takes control as the active element on the screen, dimming the bac ...

Comparing AngularJS and Node JS in serving web pages, which is better?

Currently, I'm in the process of learning how to develop a web using angular and node JS. One aspect that I am struggling with is determining where to acquire the URLs for links. After doing some research on stack overflow and various tutorials relate ...

Guide to accessing HTML elements and saving them in a JSON formatted text using JavaScript

If you have an html form with labels, select boxes, and radio buttons, you can use javascript to store the child elements of that form in a json string format. Here is an example: { "label": { "content": "This is a label" }, "textbox" ...

Utilizing AngularJS to enhance traditional multi-page web applications

Currently, our team is in the process of implementing Angular due to the high level of user interaction and dynamics involved with input elements and visual components on the front end. I'm curious if it's considered taboo to use a PHP framework ...

Only include unique objects in the array based on a common property

I am currently working with the following array: [ {name: "Mike", code: "ABC123"}, {name: "Sarah", code: "DEF456"}, {name: "John", code: "GHI789"}, {name: "Jane", code: "JKL01 ...

While observing a camera in motion, the particles tinted by texture display sporadic flickering on WebGL and Three.js

Check out this jsfiddle I created to illustrate an issue with particles "flickering" when colored using a texture and the camera is moving. Update: The problem occurs even when there is no animation or movement on the particles. If you notice flickering o ...