AngularJS select stored in the template cache

After retrieving data from a PHP database, I have it formatted in AngularJS as follows:

stuff= 
[
    {name:'stuff1', id:'1'},
    {name:'stuff2', id:'2'},
    {name:'stuff3', id:'3'},
    {name:'stuff4', id:'4'}
];

Now, I need to include this data in a select element that is stored in the templateCache.

-code-
.run(['$templateCache',function($templateCache,$scope){
$templateCache.put('/dialogs/editUser.html',
-code-
+'<select data-ng-options="s.name for s in stuff" data-ng-model="selected_s"> </select>'
-code-
}])

I am utilizing the angular-dialog-service by m-e-conroy to create a custom dialog box.

The goal is to present a dialog where users can edit something by selecting an item from 'stuff'. However, I am struggling to achieve this functionality. If anyone has a suggestion or guidance on how to make this work, please let me know. The current code does not throw any errors, but the select element remains empty.

Answer №1

The issue arises from your utilization of the entire object as a model, which Angular's select function does not support. To resolve this, modify your code to operate with the object's ID instead.

<select data-ng-options="s.id as s.name for s in stuff" data-ng-model="selected_s"> </select>

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

What is the best way to utilize the Material UI theme provider in a React application that includes a mix of class components and functional components?

I have been working on a React app that utilizes class components, but I have been transitioning to using functional components instead. I have replaced some class components with functional ones in the application. However, I have encountered an issue whe ...

What are the steps to modify data within the root component?

I am currently working on a Vue project with vue-cli and routes. In my App.vue file, the template structure is as follows: <template> <div id="app"> {{Main}} <router-view></router-view> </div> </template&g ...

encountered an undefined error while using jQuery

I have a piece of code in my header that creates a pop-up window $(document).ready(function() { //When you click on a link with the class poplight and the href starts with # $('a.poplight[href^=#]').click(function() { var popID = ...

Guide on retrieving an ArrayList() from intricate function in Angular

Simplicity is the key to my question. Let's take a look at this Angular method: getAllOrdersHeaders(){ this.getAllOrdersIds().subscribe(idList=>{ idList.forEach(id=>{ this.ordersCollection.doc(id).collection('metadata&apo ...

Switch back emulation when moving away from page - using angular javascript

I have a unique scenario in my component.ts file on a specific page where I need to incorporate custom CSS for printing purposes: @Component({ selector: "dashboard", templateUrl: "./dashboard.component.html", styleUrls: ["./d ...

Transform the process of searching for the className JavaScript block to incorporate jQuery

I have a small block that I wanted to convert to using jQuery in order to enhance my skills with the library. The main goal is to reverse engineer how it currently functions. I attempted to make the conversion, but I struggled with some of the changes. Th ...

What is the best way to convert API data into a currency format?

Hello, I need assistance with formatting data retrieved from an API into a currency format. The code below successfully retrieves the data but lacks formatting. For instance, if the data displays as 100000000, I would like it to be formatted as IDR100.000. ...

Is it possible to generate a dynamic $or using pipeline variables in MongoDB?

Feeling lost and really need some assistance! I'm stuck on this query SwapModel.aggregate([ { $match: { organisationId: mongoose.Types.ObjectId(organisationId), matchId: null, matchStatus: 0, ...

When Socket.emit is called, it outputs <span> elements within a well-structured message

Currently working on a small chat application using Node.js, Express.js, and Socket.IO. However, I'm encountering an issue with formatting. Instead of displaying the message content within <span> tags as intended, it is printing out the actual t ...

Sorting JSON content to obtain particular outcomes

I am utilizing the Quotes on Design API https://quotesondesign.com/api-v4-0/ to display random quotes by various designers on my website. However, I am looking to showcase quotes by specific designers in a random manner. Unfortunately, the code snippet ...

Stop zombie.js from loading exclusively third-party resources

During a test, I am using zombie.js to load a page from a local express server. However, the page contains a script element that makes a call to Google Analytics. I want to prevent this external script from loading while allowing other local scripts to run ...

After a duration of 4 minutes, an ERR_EMPTY_RESPONSE is thrown in response to the

My angular 5 node app involves sending a request to the server and waiting for a response. There are instances where the response takes around 5-6 minutes to arrive. However, an ERR_EMPTY_RESPONSE error is triggered by the http method after just 4 minutes ...

Unable to transfer data successfully from popup to extension.js

I am currently developing a browser extension using Crossrider and I'm facing an issue with sending data from the popup to extension.js Here is my code for the popup: <!DOCTYPE html> <html> <head> <!-- This meta tag is relevant ...

Choose information based on the prior choice made

Using the Material UI Stepper, I have a task that involves setting conditions based on the selection of checkboxes. In step one, there are two checkboxes - Individual and Bulk. In step two, there are also two checkboxes - First Screening and Second Screeni ...

Most effective method for detecting null or undefined values

Curious to know, what is the most efficient method for verifying if something is null or undefined within JSON arrays or objects in general? I have been utilizing if (value !== null && value !== undefined) { // Value isn't null or undefine ...

Automating Internet Explorer using VBA to click a button

I'm currently working on automating tasks on a website using VBA, specifically an online banking system where I am trying to export Transaction History data into a .csv file. Everything seems to be running smoothly until I reach the final Export butto ...

Can PayPal sandbox accounts in Vue be used to process live transactions on a recently launched website?

I have completed the development of my app and now I am looking to host it online. Can I allow my clients to use sandbox accounts for real transactions? This is my first time creating an app with live online transactions using Paypal. Do I need to modify t ...

What is the best way to transfer information from a nested component to its parent component in React?

I have created a parent component and a child component. The child component, called "Timer," is conditionally rendered when a button is clicked. The functionality of this code is to display a timer when the Start button is clicked and stop the timer when ...

What is the best way to ensure a textarea remains expanded when the parent element is in focus?

I have successfully implemented a textarea box that expands upon click and retracts when it loses focus. However, I am facing an issue where if the textbox is already in expanded form, I want it to stay expanded if the user clicks anywhere within the cont ...

In React, my unmanaged radio group only triggers the form's onChange event once for each radio element

UPDATE: There seems to be a bug in React that is affecting version 15.6.1 but not version 15.1.0. You can find more information about this issue at https://github.com/facebook/react/issues/10078 The problem I'm encountering is related to adding a cha ...