"Utilizing Angular's ng-repeat to house multiple select dropdown

I'm dealing with a scenario like this:

<span ng-repeat="personNum  in unit.PricePerson">
      {{personNum}}
      <select ng-model="personNum" 
              ng-options="o as o for o in unit.PricePerson track by $index"></select>
</span>

The unit.Price contains an array of numbers, such as [5,6,7,8,9], but each select is displaying the value nine. I want the first select to show option 5, the second one to display 6, and so on. Additionally, I've noticed that I can't change the options using the mouse.

There are 5 select boxes being generated, which is correct. Also, numbers from 5 to 9 are being generated as options within each select. These aspects are working fine.

javascriptangularjs

Answer №1

It appears that one issue you may be encountering is related to the track by $index in your select statement. Take a moment to review the plunker provided below and consider using ng-init to establish a default value.

http://plnkr.co/edit/2ZN1J61PD1Ev2OK1tezg

The code:

<span ng-repeat="personNum  in unit.PricePerson">
  <select ng-init="select[$index]=personNum" ng-model="select[$index]" ng-options="o as o for o in unit.PricePerson">

  </select>
</span>

Additionally, I agree with @cyan's suggestion that the ng-model should differ from the variable used in your outer ng-repeat loop.

I hope this information proves useful in resolving your issue.

Answer №2

It seems like there may be some confusion with your question regarding ng-options configuration.

Using select as and track by together is not recommended, as they are not intended to be used in conjunction and could lead to unexpected outcomes. Additionally, ensure that you are referencing the individual iteration object personNum rather than unit.PricePerson within your ng-options.

A correct implementation might look something like this:

<span ng-repeat="personNum in unit.PricePerson">
      {{personNum}}
      <select ng-model="personNum.selectedOption" 
              ng-options="o as o for o in unit.PricePerson">
      </select>
</span>

Without seeing the structure of your javascript object PricePerson, it's difficult to provide an exact ng-options configuration. Refer to the AngularJS API documentation on ngOptions for suggested templates and examples on how to construct your ng-options expression.

Answer №3

In order to resolve this issue, consider utilizing different ng-models within the select and ng-repeat sections, ensuring it is initialized with the desired value:

<span ng-repeat="personNum  in unit.PricePerson">
      {{personNum}}
      <select ng-init="personNum1 = personNum" ng-model="personNum1" 
              ng-options="o as o for o in unit.PricePerson track by $index"></select>
</span>

Furthermore, ensure that you are using distinct ng-models to allow for changes via mouse input.

To address this, define an array of options within your controller: 

$scope.selectedOptions = ['5','6','7','8','9'];

Then integrate this array into your view as follows: 

<select ng-model="selectedOptions[$index]" 
              ng-options="o as o for o in unit.PricePerson track by $index">

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

Refresh the page in order for scrolling to be enabled when utilizing ng-view in Angular

Seeking assistance with a scroll problem. I've activated the overflow attribute for the ng-view div, but the view it loads doesn't have scrolling enabled. The scroll only becomes visible after the browser is reloaded or refreshed. Please note t ...

angularjsautoscrollng-view

Avoid storing js files in cache during the development phase

When I use django runserver for development, I encounter the issue of my javascript file being cached. It's difficult to determine if the file is cached or not unless I manually add alert or console.log statements each time I make a change just to che ...

javascripthtmldjango

How can I retrieve an array of collections from multiple parent documents in Firebase and pass them as props in Next.js?

I need to access all the collections within the documents stored in a collection named users. This is how I currently retrieve all the user information: export async function getServerSideProps() { const snapshot = await firebase .firestore() .collection ...

javascriptfirebasenext.js

after ajax post, enhance original object by merging with the latest server values

After making a call to the server and successfully saving some data, I need to update the JSON array object that I have with new values. Here is a snippet of my code: [ { "id": 1, "uuid": "ce54acea-db20-4716-bceb-2f3deb1b2b86", "name": null, ...

javascriptarraysjsonangular

Incorporate various style components to enhance the appearance of an item in ExtJS

I'm attempting to add ellipsis to an item created by ExtJS. My goal is to only modify this item without adding any additional CSS files. After researching, I discovered there is a "style" parameter that accepts CSS styles and attempted the following: ...

javascripthtmlcssextjs

Ways to address the alignment of list items within a drawer component using React

A couple of days back, I posted a query right here: How can I expand only one ListItem using a single method in React? I received an incomplete response which I accepted (although it seemed to work initially). Admittedly, my question may have been slight ...

javascriptreactjsmaterial-uilistitemdrawer

Properly defining a DI service in Angular 2.1.2 using ES5

I have created an Angular 2 service that utilizes the Http service and is accessed by other components. However, I am unsure if my implementation is correct: (function (app) { 'use strict'; app.LoaderService = ng.core.Component({ providers: ...

javascriptangularecmascript-5

Testing asynchronous functions with Mocha

Currently, I am in the process of developing a node wrapper to interface with an external api. One particular challenge I am facing is testing the asynchronous functionality of the createJob method. Provided below is the test case code: api_key = "test_0d ...

javascriptnode.jstestingcoffeescriptmocha.js

Is it possible to manipulate videos embedded in an iframe using javascript?

It's common knowledge that JavaScript commands from Google can be used to control YouTube videos, while Vimeo provides its own JavaScript commands for their videos. Both videos are typically embedded within 'iframes' on websites. I'm ...

javascriptjqueryhtmliframe

What is the process for sending an image as input to a Django view using an Angular frontend?

I currently have a django web api with an angular frontend that allows users to upload and view images. My goal now is to expand this functionality: when the user clicks the "segment" button (see image), it should send the corresponding image to my python ...

javascriptpythonangularjsdjango

The redirection from Azure AD SSO is not working properly following a logout

In my quest to integrate Azure AD login into a single-page application built with ReactJS, I utilized the MSAL React package. While successfully implementing the login functionality, I encountered an issue during logout where I found myself unable to redir ...

javascriptreactjsazureazure-active-directory

Enhancing Three.js interaction with the DOM (using linkify.js)

Having trouble making the click event work and linking a sphere with a URL using the latest version of three.js. Here is my code: // Code snippet will be here Any help or suggestions would be greatly appreciated. I'm still new to this! ...

javascriptthree.js

Is there a way to keep a label in a Material-UI TextField from getting obscured by an adornment when the input is not in focus?

Here is the code for my custom TextField component: <TextField fullWidth: true, classes, helperText: errorText, FormHelperTextProps: getInputProps({ error }), InputProps: getInputProps({ error, endAdornment: error ? <Warning ...

javascriptreactjsmaterial-ui

Utilize HighCharts to seamlessly implement multiple series with the help of AJAX requests

I am facing an issue with plotting the performance results on HighCharts using AJAX. The problem lies with the .addSeries API call not functioning correctly. I need assistance in determining if my approach is correct. $(function () { $('#chart3&a ...

javascriptjqueryajaxhighcharts

What sets apart the CSS file directories in a React application compared to those in an Express server?

For instance, there is a public folder that contains all the css files, and a separate view folder for ejs files. When linking the css file in the ejs file, the code usually looks like this: <link rel=”stylesheet” href=”styles.css”> or like ...

javascriptreactjsejs

Practical steps for programmatically adding or removing md-disable-backdrop in md-sidenav

Can the md-disable-backdrop attribute be removed from HTML? The issue arises when opening the side navigation as the md-sidenav does not have the md-disable-backdrop attribute. After making a selection from the form displayed in the side navigation, I now ...

javascripthtmlangularjsmaterial-designangular-material

Locate a collection of fruits from an array within an array of objects, determine the quantity of each fruit, and add this information to a new array as individual objects

How can I efficiently loop through the array of objects containing fruits and vegetables, compare them with predefined lists of fruits and vegetables, and then filter and sum up the quantities based on these arrays? I am attempting to create a new array o ...

javascriptarraysjson

Discover the power of Mapbox Geocoding

After implementing Mapbox's Geocoder Contro, I am thrilled with how well it is working. One thing that I am trying to figure out is how to display a marker at the exact location of the address that was searched for. Below you can see the code snippet ...

javascriptgeocodingmapbox

Using Node.js to showcase MySQL data in an HTML table

Currently, I am in the process of learning how to utilize node.js with mysql. Despite my efforts to search for comprehensive documentation, I have not been successful. I have managed to display my mysql data on my browser, but ultimately I aim to manage it ...

javascripthtmlmysqlnode.js

Is there a way to tell if an image has completed loading?

I am facing an issue with a block of php code that randomly loads an image. My goal is to identify when the image has finished loading so I can execute additional actions on it. This is how the image is currently being loaded: // Retrieves the image $sql ...

phpjavascriptjqueryimage