Utilizing ng-options to pass values rather than entire objects

Currently, I am parsing a .json file and displaying all available options in a select dropdown menu:

<div bo-switch-when="dropdown">
  <fieldset>
      <select ng-options="options.text for option in question.body.options" ng-model="question.answer" ></select>
  </fieldset>
</div>

While this setup is functional, it doesn't meet my specific needs. Rather than storing the entire object in my model, I only want to capture the value of the object itself. According to Chrome Dev Tools:

The complete object (as shown in the image) is currently stored in my model. However, I simply require the text.

When attempting to modify my ng-options as follows:

ng-options="options.text for option.text in question.body.options"

Unfortunately, this adjustment does not yield the desired outcome...

Answer №1

The ngOptions documentation explains that you can specify which property of an object to use as the value for options by using the syntax

select as label for (key , value) in object
. In this case, select is the property bound to the model and label is the property used as the options label. There is no need for ngRepeat here.

In your scenario, simply utilize the .text property for both the select and label:

<select ng-options="option.text as option.text for option in question.body.options" ng-model="question.answer">

Answer №2

Among Angular developers, this is a question that tends to come up frequently.

To achieve this, you can utilize the ng-repeat directive in the following manner:

<select ng-model="question.answer" >
  <option ng-repeat="option in question.body.options" value="{{option.text}}">{{option.text}}</option>
</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 process for transforming promises into async await syntax?

login() { return new Promise((resolve, reject) => { userCollection.findOne({email: this.data.email}).then((myUser)=>{ if (myUser && myUser.password == this.data.password) { resolve("Congrats! Succe ...

Is there a built-in method in Angular to iterate over an object and update its values?

I have an object with various numbers stored in the object.Value. I want to iterate through them and convert each object.Value to a number with 2 decimal places. What is the correct Angular approach to achieve this? Here is my array: $scope.calendar = [{ ...

What is the process for creating the AngularJS documentation?

I find the documentation for AngularJS to be easily understandable - I wonder how it is created? If JSDoc is used, where can I find the style sheet? ...

Guide on how to selectively add middleware such as multer to a fresh express router

For a previous project, I set up a router and utilized multer for handling file uploads. I was able to apply the multer middleware selectively on specific routes as shown below: var router = express.Router(); var multer = require('multer'); var ...

What is the process for using express and Postman to send a PUT request and modify a specific field in MongoDB?

I'm struggling to figure out how to use a MongoDB document's id in the route and manipulate the 'balance' field using Postman. Here's what my code currently looks like: My route: router.put('/:id', async (req, res) =&g ...

What is the proper method for utilizing assignments instead of simply assigning values directly?

In the process of developing a markdown editor, I am currently focusing on the functionality of the B (bold) button which needs to toggle. It's important to mention that I am utilizing this library to handle highlighted text in a textarea. Below is t ...

What are some strategies to prevent django form fields from being reset or cleared in the event of an error during submission?

I'm utilizing django's registration-redux for user registration, but I'm facing an issue. When I enter the same user ID, it displays an error and clears all the input fields on the form. How can I prevent this error from occurring without cl ...

Issues with uploading files in NodeJs using express-fileupload are causing errors

I created a REST API in NodeJs for File Upload which is functioning correctly, however I am facing an issue. When I upload more than 2 images, only 2 or 3 get uploaded and sometimes one gets corrupted. I suspect that the loop is running too fast causing th ...

Checkbox click event not triggering properly

I am facing challenges in triggering an onclick event for the "Elevation" checkboxes located at the URL provided above. <input type="checkbox" value="A" id="elevation_A" onclick="changeElevation(this.value);" /> For some reason, the "changeElevati ...

End event in NodeJS response does not activate

I'm encountering an issue with sending the response data to the client. The response is not being sent and the 'end' event is not triggered. I'm at a loss on how to resolve this issue. My objective is to send the retrieved data from red ...

How can I alter the background color while performing a transformation in JS/CSS?

I'm currently working on achieving a flipboard effect for some divs, where one side is white and the other is black. Here's what I have so far: setInterval(function () { document.getElementById('test').classList.toggle('flipped& ...

Next.js App encounters a missing API route (The requested page is not found)

I have been working on a Next.js app and I created an api route for sending emails. Everything is functioning properly in my development environment. However, after deploying to production, I encountered a 404 error with the message "The page could not b ...

Guide on utilizing popup box input to amend CSS (background color)

I'm looking for some guidance on JavaScript and CSS. Is there a way to create a popup box where users can input a color (any main primary color recognized by CSS) and then have the background color of the page change accordingly in an external styles ...

Restricting the number of times a user can click on

I am currently displaying a table with data obtained from a database query. The structure of the table is outlined below: <table id="dt-inventory-list" class="table table-responsive"> <thead> <tr> <th>Field ...

Revamp HTML <font size=1-7> with the use of CSS or JavaScript

I've been developing a prototype application that incorporates a plugin utilizing the deprecated HTML feature. Can I set custom pixel sizes for each font size ranging from 1 to 7? Currently, I'm contemplating using CSS zoom/scale properties, bu ...

Click the link to copy it and then paste the hyperlink

I am facing an issue with copying and pasting file names as hyperlinks. I have checkboxes next to multiple files and a share button. When I check the boxes and click on the share button, I want to copy the download URLs for those files. Although I can succ ...

Tips for acquiring the initial fully visible item within a scrollable element with horizontal alignment through jQuery

I'm trying to use jQuery to find the first visible element inside a scrollable DIV, but I can't quite get it to work correctly. Can someone please help me identify what's causing the issue? $('div').on('scroll', functio ...

The success callback in JQuery Ajax does not function properly when constructing an array of Ajax calls

I am facing a challenge in building an array of custom objects by resolving promises from an array created based on another array. Consider having an array of letters = ['a', 'b', 'c']. I then map this array to make Ajax call ...

Utilizing Ajax for Efficiently Updating a Singular Field within a Designated Object

How can I use Ajax to Update a Single Field in a Specific Object? I have a table in my postgres database with numerous records. I am interested in using a jquery Ajax request to update just one field in a particular object within that table. Is it possibl ...

Make sure to wait for the scrollTo function to finish before executing any other commands

I have a sleek scrolling directive in my AngularJS app that automatically scrolls to the bottom of the page. I want this command to execute only after the scrolling has completed. Currently, I trigger the scroll function and then use $('#comment-input ...