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...

javascriptangularjs

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

Converting a function to an ES6 class-based style

Hello, I am new to ES6 and eventEmitter. I have created a module in Node.js with an event-based style and now I am trying to convert it to ES6 class style. This is my code: // eventStyle.js const events = require('events'); const util = require ...

javascriptnode.jseventsecmascript-6eventemitter

JQuery hover effect for dynamically added elements

Currently, I am working on a webpage that will trigger an ajax call upon loading. The response data in JSON format will be processed and the elements will then be added to the DOM as shown below: $.ajax({ type: 'POST', url: "http://mysite.de ...

javascriptjquerycssajax

"The FindByIdAndUpdate function is successfully updating the data, but it is unexpectedly

This is my first time seeking guidance here, as I've reached a dead end with my issue. I am currently working on a household collection that includes a member collection within it. Whenever new members join, I need to update the household collection ...

javascriptnode.jsexpressroutes

Include a <script> tag within the HTML code in AngularJS

Is there a way to insert a script tag into paysucc.html when the response.statusText equals "OK"? The script: <script src="https://test.oppwa.com/v1/paymentWidgets.js?checkoutId={checkoutId}"></script> Substitute checkoutId with response.dat ...

angularjs

Using md-chips and md-select together in multi select mode

I'm having trouble generating md-chips when selecting multiple values from an md-select. Does Md-chips only work with autocomplete analyzers and input fields? <md-chips ng-model="launchAPIQueryParams.type"> <md-select name="launchCalTy ...

htmlangularjsangular-material

I am attempting to retrieve the JSON object value from an error response while making a POST request in my Next.js application

Users can input an email into an input field, which is then sent as a post request to an API using the following code: try { const res = await fetch("/api/email-registration", { method: "POST", headers: { ...

javascriptapinext.jsxmlhttprequesthttp-post

Implement OAuth for user authentication and registration using a customized username feature on an express.js platform

Within my node.js+express.js stack, I have enabled users to register/login using both Twitter and Facebook, as well as through a native registration form. To manage this functionality, I am utilizing everyauth for handling Twitter and Facebook authenticati ...

javascriptnode.jsexpressoauth-2.0registration

Ways to insert additional panels prior to and after a selected panel

A button is provided in the report designer detail band that, when clicked, should add new panels immediately before and after the detail panel. $parentpanel = $this.parents(".designer-panel:first"); This code snippet is used to locate the parent panel u ...

javascriptjqueryhtmlcss

The JSON node fails to return a value after inserting data through an ajax request

I'm encountering an issue with a jQuery plugin that loads JSON data through an AJAX call and inserts it into an existing object. When I attempt to reference the newly inserted nodes, they show up as 'undefined', despite the data appearing co ...

javascriptjqueryajaxjson

What could be causing certain link titles to appear outside of my <a> tags?

Check out this jsbin link to see the issue I am facing. I noticed that some of my link titles are appearing outside the anchor tags. Initially, I thought it was because some titles were enclosed in double quotes. I tried creating a function to fix this, b ...

javascripthtmlajaxjson

Ways to modify color while user moves the screen

I'm working with some jQuery code that changes the colors of elements as the user scrolls down, and I want it to revert back to the original color when scrolling back up. However, the script is not behaving as expected... Here is the original working ...

javascriptjqueryhtmlcss

Click event not functioning in programmatically loaded HTML

I am facing an issue with a JSON file that contains the page content I am trying to load. The link within it appears as follows: <a data-ng-click='foo()'>Bar</a> When I load this page content into the HTML page: <p class="body" ...

javascriptangularjs

Using jQuery JSONP only functions with URLs from the same site

I am looking to send a request to an API that returns data in json format. The API is located on a sub-domain of the domain where my script will be running (although currently it's on a completely different domain for development, localhost). My unde ...

javascriptjqueryjsonphttp-post

Creating a scheduled redirect button using JavaScript and another button to cancel it

I'm facing an issue with my code. When the first button is clicked, it redirects the user to a different URL after 10 seconds. However, I'm struggling to make the second button cancel the redirect if pressed before the 10 seconds are up. Despite ...

javascripthtmljqueryhttp-redirectonclick

Next.js Head component will not repeat the same Meta Tags

In my Next.js project, I have implemented different meta tags with various media targets in the Head section: <Head> <meta name="theme-color" media="(prefers-color-scheme: light)" content="#7f8fa6"/> <meta name= ...

javascriptreactjsnext.js

Combining Rails with AngularJS seamlessly

I've spent the last few hours trying to integrate Rails with Angular, following a tutorial that I found. At this point, I'm ready to throw in the towel. The tutorial can be found here. But, I simplified things even more: In my application.js fi ...

ruby-on-railsrubyangularjsruby-on-rails-4

Implementing ng-click functionality within a controller

Scenario I have a carousel within modal A consisting of credit card slides. One slide triggers the opening of modal B, which is used to enter new credit card details. Once Modal B is closed, an object from it should be returned to A and added to the carou ...

angularjsangular-bootstrap

When faced with the error message "Typescript property does not exist on union type" it becomes difficult to assess the variable

This question is a continuation of the previous discussion on Typescript property does not exist on union type. One solution suggested was to utilize the in operator to evaluate objects within the union. Here's an example: type Obj1 = { message: stri ...

javascripttypescripttypesunion-types

Experience the convenience of uploading photos using jQuery Dialog on your ASP.NET MVC website

I am in the process of developing an ASP.NET MVC 3 application and encountering an issue with using a jQuery Dialog to upload a photo. Despite my code implementation, the HttpPostedFileBase object within my model (representing the file to be uploaded) cons ...

javascriptjquery.netasp.net-mvcupload

Exploring the ins and outs of console interactions in JavaScript

I have come across a problem on Hacker Rank that seems quite simple. The task involves working with N strings, each of which has a length no more than 20 characters. Additionally, there are Q queries where you are provided a string and asked to determine ...

javascriptnode.js