Connect select with an array of objects and showcase information when an item is chosen from the dropdown menu

I have an array

$scope.items= [
{ name: "Jon Snow", email: "jon@example.com", password: "WinterIsComing" },
{ name: "Daenerys Targaryen", email: "daenerys@example.com", password: "FireAndBlood" }
];

Now, I am trying to show the email value in a dropdown menu. However, my current code is not functioning as expected. Ideally, I would like the first option to display 'Select' :

<select id="idItem">
<option value="-1" selected="selected">Select</option>
<option ng-repeat="o.email as o.email for o in items" value="{{o.email}}"> {{o.email}}
</option>
</select>

Additionally, the user should be able to select multiple items from the dropdown menu. Upon selecting multiple emails, a confirmation box should appear showing the Name and password of the chosen users.

Answer №1

<select id="idItem" >
<option value="-1" selected="selected">Choose an option</option>
<option ng-repeat="item in items" value="{{item.email}}"> {{item.email}}
</option>
</select>

I believe this solution should work. If it doesn't, please provide your Plunker URL next time.

Answer №2

If you have a JSON object with all the items already, it's best to use ng-options. Make sure to include multiple="true" for multi-select functionality and set up an ng-model to store the selected results.

<select id="itemID" multiple="true" ng-model="selectedItems"
        ng-options="item.name for item in itemList">
</select>

You can also create a message box that shows the selected items if needed.

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

Having trouble loading JSON data using $http. It works fine on the Browser, but encountering issues on Android devices and emulators

I recently embarked on my journey to master the Ionic framework and AngularJS for creating an Android application. My goal was to develop an APOD viewer, which stands for Astronomy Picture of the Day. To fetch the data, I make an API call to: The API res ...

Inconsistent Accuracy of React Countdown Timer

Hello everyone! I'm new to programming and I'm currently working on creating a countdown timer that goes from 3 to 0. The issue I'm facing is that the timer counts down too quickly when rendered on the screen. I've tried adjusting the i ...

What steps can you take to convert your current menu into a responsive design?

I am currently developing a website using PHP, HTML, and CSS. The site is not responsive, and I want to make the menu responsive. My global navigation and admin interface are not adapting properly as they are designed using tables. Is there a method I can ...

How can I optimize my Javascript applications for better search engine rankings?

Recently, I've been exploring the idea of implementing a fresh workflow process for web development. Yemoan, Grunt, and Bower in conjunction with AngularJS look promising as a solution for front-end development. However, one major drawback is their po ...

The output of the incorrect .bind() example is not as

I recently came across the .bind() method while learning JavaScript. The example I found on MDN here was quite helpful, but I decided to add some console.log() statements for better understanding. this.x = 9; // Here 'this' refers to the glob ...

Tips for utilizing express in your typescript projects

I'm curious about the transition of definition files from tsd to typings, and now to @types. How can I incorporate @types in a node/express project? What is currently preferred and what's the reason for moving from tsd to typing and finally to @t ...

Sending variable boolean values to a VueJS component

How can I assign dynamic properties to a VueJS Component using VuetifyJS? Below is an example of VuetifyJS code that constructs a select field element: <div id="app"> <v-app id="inspire" style="padding: 10px; "> ...

The express response fails to include the HTML attribute value when adding to the href attribute of an

When using my Nodejs script to send an express response, I encounter a problem. Even though I set the href values of anchor tags in the HTML response, they are not visible on the client side. However, I can see them in the innerHTML of the tag. The issue ...

Is it possible to transfer a Mongo connection to JQuery code using socket.io?

I'm currently working on setting up a global MongoDB connection in my node.js web app. Here is what I have so far: var MongoClient = require('mongodb').MongoClient; var mconn = null; MongoClient.connect('mongodb://myHost:27017/users&a ...

Methods for establishing state within a React Native render function

I encountered an issue when attempting to set state within the render lifecycle. Warning: It is not recommended to update state during an ongoing state transition, such as in the render method or another component's constructor. The render method s ...

Troubleshooting an issue with an AJAX request

Having trouble getting the HTML back from an AJAX call - works in FF but returns "null" in IE when using alert(result.html()); Here's the code, any suggestions? Thanks! The errors variable is also null in IE. It doesn't matter what element I u ...

Initiating a click function for hyperlink navigation

Here is the HTML and JavaScript code that I am currently working with: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <a href="#f ...

Error in MEAN Stack: Unable to access the property 'companyTitle' because it is undefined

I have established a MongoDB collection named joblist in my database. Additionally, I have developed a DB schema known as jobList.js. var mongoose = require('mongoose'); const joblistSchema = mongoose.Schema({ companyTitle: String, jobT ...

Encountering difficulties linking to a stylesheet or a script in an HTML file delivered by Express server

Currently, I'm facing the challenge of breaking down my Express app code into multiple files. Unfortunately, I am unable to utilize <link href> or <script src> for linking stylesheets or scripts. Below is the relevant snippet from my inde ...

What methods does MaterialUI utilize to achieve this?

Have you checked out the autocomplete feature in their component? You can find it here: https://mui.com/material-ui/react-autocomplete/ I noticed that after clicking on a suggestion in the dropdown, the input box retains its focus. How do they achieve thi ...

Is jQuery still recommended for adding animations in VueJS?

In my component's methods object, I currently have the following code snippet: startImageAnimation() { $('.splash-image').fadeIn(1400, () => { setTimeout(function() { $('.splash-image').fadeOut(1400, () ...

How to display a three.js scene in the center of a container

I'm having trouble getting my three.js scene to display above some cards and right below my navigation bar. Currently, the scene is rendering under the cards and is not centered. Despite looking at other forum posts for help, I can't seem to figu ...

Use jQuery to extract data from the URL instead of relying on PHP

http://h3gsat.altervista.org/DettagliCompleto.php?id=4567 I attempted to extract the id parameter without success. I am attempting to accomplish this using JavaScript (jQuery) instead of PHP, but I am unsure of how to proceed. ...

Hide an Angular button when a page is loaded, depending on the information found in a table

How can I hide the Submit button in a table row if a certain condition is met based on information from the database? I attempted to create a function that returns true or false, but it ends up crashing my program because it runs continuously. I also trie ...

Swap out the old nested array for a fresh array

Currently, I am dealing with an array nested inside another array. The structure looks like this: Structure: First Array [ { Second Array [ { } ] } ] I am attempting to replace all instances of Second Array with a new array that I have cr ...