Placing a preset value within a <select> using angular's ng-options, potentially utilizing ng-init

This is an HTML example:

<select ng-model="inventory.condition"
        ng-init="inventory.condition = con"
        ng-options="con.name for con in conditions"
    <option >-- choose condition --</option>
</select>
{{inventory.condition}}

In the AngularJS controller:

$scope.conditions = [
        {"name":"New","id":101},
        {"name":"Used","id":102},
        {"name":"Like new","id":103},
        {"name":"Not Working","id":104}
] 
$scope.inventory.condition = {"name":"Used","id":102};

The SELECT population works fine, and if I select an item on the list it sets the ng-model correctly and the HTML displays the selected model correctly (I want to get the complete model selected, not just the "id" value), but I can't set the default value when building the list.

The idea is to receive a model (JavaScript object) that contains the default value (which really comes from an HTML request from a web service that is previously persisted in a database) and select the default item with the value from the model, and allow the user to change the same model by selecting a new item (which will be updated/persisted later).

Answer №1

The issue at hand is that the $scope.inventory.condition needs to be an element of the $scope.conditions array. Two objects are only considered equal if they are the same object, so assigning

$scope.inventory.condition = {"name":"Used","id":102};
will not work. Even though {"name":"Used","id":102} appears to be the second value in the array, Angular will not recognize it as such.

To set the model value correctly, do the following:

$scope.conditions = [
    {"name":"New","id":101},
    {"name":"Used","id":102},
    {"name":"Like new","id":103},
    {"name":"Not Working","id":104}
];
$scope.inventory.condition = $scope.conditions[1];

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

Creating a canvas with multiple label introductions can be achieved by following these

I am looking to group labels and sublabels on the x-axis of a canvas component. Currently, I only have sublabels like: RTI_0, RTI_1... I would like to add labels to these sublabels like: RTI = {RTI_0,RTI_1,RTI_2] BB = {BB_0, BB_1,BB_2,BB_3] <div cla ...

Stop phonegap from altering the default orientation on the device

As a newcomer to phonegap, I am seeking a reliable and straightforward way to determine whether a device is a tablet or a phone. My current method involves comparing the width and height sizes of the screen - if the width is greater, then it is a tablet; o ...

Retrieving information within a Vue component

I am struggling to access some data I have bound to a component without success. How can I achieve this? Below is my component: export default { name: 'component-vallingby', data() { return { } }, created() {}, methods: {} } And h ...

Error: Unable to extract tags from the JSON data as it may be null and cannot be mapped

Within my database, I have a collection of records where not all of them are tagged, some may be empty, and they are stored in CosmosDb and retrieved as a Json array. For displaying the data, I am utilizing antd table and tags: https://ant.design/componen ...

Errors and warnings caught off guard while running json-server with the --watch flag

I'm having some trouble using json-server in the following way: $ json-server --watch db.json Every time I try to run that command, I encounter errors or warnings depending on the version of json-server that is installed: 1.0.0-alpha.1-1.0.0-alpha.1 ...

retrieve data from a pre-populated object that was generated by a different HTML file

I currently have 2 HTML files (index.html and event.html). Within my index.html, I am importing a JavaScript file: <script type="text/javascript" src="../js/events/createEventOBJ.js"></script> In this JS file, I have an example with a filled ...

Functionless Ajax post request

Having a bit of trouble with a simple problem and I can't seem to spot the error. Would appreciate any help or insights you might have. Here's the issue at hand: $http({ url:'api/create_plane.php', method: "POST", data: { ...

I'm trying to retrieve information from openweathermap in order to show it on my app, but I keep running into an error that says "Uncaught RangeError: Maximum

I recently created a div with the id 'temporary' in order to display data retrieved from the openweathermap.org API. However, I am encountering an error in the console and I'm not sure why. This is my first time working with APIs and I would ...

Template Function Problem Detected in AngularJS Formatting

I'm struggling to incorporate my scope attributes into a template function within my custom directive. The formatting for the return section in my template is not working as expected. This is how it currently looks: angular .module(' ...

Rendering a custom Vue 3 component as a string and then passing it to another component as a prop

Hey there coding mates! Currently diving into Vue 3 and the composition API with setup. I've been crafting a custom "Table" component to display... well, tables. It requires a prop named "data", which is an array of objects (representing rows) conta ...

During the installation of a package, npm encountered a require stack error with the code MODULE_NOT_FOUND

Whenever I attempt to install something using the npm install command, it throws an error saying "require stack" and "code MODULE_NOT_FOUND" C:\Users\dell>npm audit fix node:internal/modules/cjs/loader:1075 const err = new Error(message); ...

What is the best way to update React State after making an asynchronous call to MongoDB?

I have been facing a common issue, but couldn't find an up-to-date solution on Stack Overflow specifically for React/Meteor. My goal is to query a mongoDB to retrieve data and then pass it into the state of my React components. Currently, I am queryin ...

What is the best way to transform an Object {} into an Array [] of objects with varying structures?

Within my javascript code, I am working with an object structure like this: let obj= { a: { a1: [5,5], a2: [6,6] }, b: { a1: [7,7], a2: [8,8] }, c: { a1: [9,9], a2: [3,3] } } The goal is to ...

Developing Paid Node Modules: A Step-By-Step Guide

Looking to monetize node modules? Interested in releasing your CMS plugins on NPM and offering some as paid options for users to install? Wondering how to go about it? ...

How to effectively manage errors in WCF using JavaScript?

Does anyone have instructions on using callback functions in a WCF Service that is accessible to Javascript? I am particularly interested in retrieving information from the FailureCallback to understand why my method is not working as expected. To clarify ...

Attempting to dispatch data from Vue.js event bus

I am attempting to increase the count of quotes by one and also add the text from a textarea to an array. While the text is successfully added to the array, the number of quotes always remains zero. I have tried combining the two actions in one method as w ...

Exploring the magic of the (!!!) operator in JavaScript!

The !! operator proves to be quite helpful when converting non-boolean data types into Boolean values, mainly for "True" conditions. However, when it comes to false conditions, is using !!! necessary? ...

Express 4 Alert: Headers cannot be modified once they have been sent

I recently upgraded to version 4 of Express while setting up a basic chat system. However, I encountered an error message that says: info - socket.io started Express server listening on port 3000 GET / 304 790.443 ms - - Error: Can't set headers ...

This code's workflow is completely confusing to me

Currently, I am engaging in an online tutorial that focuses on creating a basic web application using MEAN stack. The coding snippet provided below pertains to the modification of a collection of JSON objects (where videos are represented as JSON objects). ...

Transferring information from JavaScript file to an HTML document

Learning the basics of NodeJS. I have created a simple program that sends data back and forth between HTML and NodeJS files. In my index.html file, there is a form for user input and a div to display the response from server.js: <html> <body> ...