I am unable to configure the value using NG-Options

Currently, I am facing an issue with loading a select box using the ng-options directive.

The problem is that I am unable to have the options display values ranging from 23-26, instead of 0-3. The values should match the "eigenschap_id" that I pass through.

I'm wondering where the mistake lies in my code. Below is the snippet I am working with:

Controller:

$scope.eigenschappen.game = categories.Game;

JSON string / object:

[{"cat_id":6,"cat_name":"Game","eigenschap_name":"RPG","eigenschap_id":23},{"cat_id":6,"cat_name":"Game","eigenschap_name":"Strategie","eigenschap_id":24},{"cat_id":6,"cat_name":"Game","eigenschap_name":"Avontuur","eigenschap_id":25},{"cat_id":6,"cat_name":"Game","eigenschap_name":"Simulatie","eigenschap_id":26}]

HTML View:

<select data-ng-options="i.eigenschap_id as i.eigenschap_name for i in eigenschappen.game" ng-model="chosen"></select>

Generated HTML:

<select ng-model="chosen" data-ng-options="i.eigenschap_id as i.eigenschap_name for i in eigenschappen.game" class="ng-pristine ng-valid">
    <option value="?" selected="selected"></option>
    <option value="0">RPG</option>
    <option value="1">Strategie</option>
    <option value="2">Avontuur</option>
    <option value="3">Simulatie</option>
</select>

Answer №1

When Angular populates the select options in the HTML, the value attribute for each option may not align with what you expect. It is assigned as follows: - When an array is used as the data source, the value is set to the index of the array. - When an object is used as the data source, the value is set to the key or property name.

Upon selecting an option, Angular matches the index or key to retrieve the corresponding value from the array or object. This retrieved value becomes the model that is stored, rather than the visible value in the HTML, leading to potential confusion.

For instance, with an array data source, Angular will update the model with the value located at the index specified by the selected option value. If the array consists of [2013, 2014, 2015], the generated HTML values for the options will be 0, 1, and 2 respectively. Selecting the second item would result in Angular fetching the value 2014 from array[1] to update the model accordingly.

Reference: Insight shared by Mark RajCok on http://docs.angularjs.org/api/ng.directive: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

How can data tables be generated using AJAX, JSON, HTML, and JS?

HTML: <table> <tr> <th>Student Name</th> <th>Student Grades</th> </tr> <tr> <td> <select name="dropdown" id= ...

Angular 2: Dynamically Adjusting View Components Based on URL Path

Apologies for the unconventional title. I struggled to come up with a better one. My goal is to develop an application with a simple 3-part structure (header / content / footer). The header should change based on the active route, where each header is a s ...

JavaScript code that deletes text from a document - Script eradication

I am trying to display the message "Todays Beer Style is: "Beer Style". However, when I add the javascript code, the "Todays Beer Style is:" text disappears. I'm not sure why this is happening. Below is the HTML code for reference. HTML Code <!DO ...

Is it necessary to enable validation for an Angular reactive form toggle?

Can you help with this issue I'm having? I have a radio button that asks the user if they have a massage certificate. If they answer yes, a file input should be displayed. By default, the file input should not be required, but if the user selects yes, ...

Does vuetify have a v-autocomplete callback for when there is no filtered data available?

Is there a method to detect when the v-autocomplete component in Vuetify.js displays "no data available" after filtering? I have searched the events documentation here https://vuetifyjs.com/en/api/v-autocomplete/#events Is there a workaround for this iss ...

display rails view using ajax

I have developed a new form that I would like to render using ajax in case it fails validations. In my controller, the code looks like this: def create event = CEvent.new(params[:c_event]) respond_to do |format| if event.save format.html { ...

Error message: When initiating AJAX requests in ASP.NET, the function is not defined for undefined

I recently followed a tutorial on creating AJAX requests for CRUD operations in an AngularJS application. However, upon trying to perform an AJAX request to retrieve data from the database, I encountered the following error when launching my application: ...

Loop over a generated form with fields using ng-repeat

I am facing an issue where I have an ng-repeat loop and I need to submit the values of input fields within it to a generated form. Using ng-model did not work for me. Is there a way to access the input names inside the form tag? <li ng-repeat="group ...

Creating a dynamic interaction between HTML forms and JavaScript using the onsubmit event handler

Having trouble getting my JavaScript file to fire when clicking the submit button on my simple HTML form. Can anyone provide some assistance? **UPDATED CODES Here is a snippet of my condensed HTML file: <html> <form name="form01" id="form01" ac ...

Do elements containing {visibility:hidden} properties exist within the HTML DOM structure?

Do HTML elements that have the css property visibility:hidden still exist within the DOM tree? ...

Combining ng-repeat with the float property set to left

I am attempting to create two rows of divs using ng-repeat. Each div is styled with a float: left attribute, and at the end, I add a clearing div with clear: both. <div class="interval" ng-repeat="interval in intervals"> <div class="text-cen ...

Displaying a singular item using ng-repeat

Within my main ng-repeat div, I have a specific div that should display only one matching value. However, my current approach is causing the same value to be duplicated in every instance because it is within the main ng repeat loop. What alternative soluti ...

Retrieve information from a different JSON dataset using AngularJS when provided with a specific identification number from a related service

I'm currently learning AngularJs and facing a challenge in extracting data from two different JSON API services. I have successfully retrieved a list of user IDs from one service and displayed them. Now, I need to fetch the first name and last na ...

Create a global variable by importing an external module in TypeScript

I am currently developing a TypeScript npm module called https://www.npmjs.com/package/html2commonmark. This module is versatile and can be utilized in nodejs (via require) as well as in the browser (by loading node_modules/html2commonmark/dist/client/bund ...

I am noticing multiple quantities of the same item being added to my shopping

Recently, I encountered a problem with my online shop that seems to be related to the Javascript. The issue arises when I add an item to my shopping cart from this particular page: . Initially, when I click 'Add to Cart,' the item is correctly ad ...

Typescript controller inheritance leading to Error: $injector:unpr Unknown Provider due to minification

LATEST UPDATE: 2019/07/16 The issue I am facing is actually a result of misusing $inject. Instead of declaring it as private $inject in api-service.ts, it should have been public static $inject = [...]. During the minification process, explicit injection ...

Best practice for validating a form using React: Why the state doesn't update immediately with useState and onSubmit

I'm currently working on implementing a custom form validation for my React project using Typescript. However, I've encountered an issue with the useState hook not updating the state containing errors immediately upon form submission. Let me illu ...

"Exploring the use of conditional rendering in React to dynamically hide and show components based

I am currently immersed in the world of React/Redux, focusing on an e-commerce project. This particular application offers two payment methods: cash and card payments. On the product display page, both payment icons are visible. However, I am seeking a sol ...

Ways to invoke a JavaScript function using a JSON string

Suppose I make an AJAX post request using jQuery with the following structure: $.post('MyApp/GetPostResult.json', function(data) { // what should be implemented here? }); When the result is as follows: { "HasCallback": true, "Cal ...

Could the jQuery not be running due to the .htaccess file? How can I resolve this issue?

Good Day, I am encountering a persistent pop-up issue with my Joomla! template, displaying only the word "here" in the browser as shown in this Screenshot After investigating, it was suggested that the .htaccess file may be responsible for this behavior. ...