Stop automatic selection of the last value in ng-options using AngularJS

I'm facing an issue related to AngularJS. The problem I'm encountering is that...

In my code, there are two select elements. Whenever I choose an option from the first select, an Ajax call is made using ng-change to populate the second select based on the response. However, after the Ajax request finishes and $scope.$apply() updates everything, the second select always defaults to selecting the last item. Why does this happen and how can I prevent it?

Interestingly, this strange behavior only occurs with one specific select element, even though I have many other select elements populated via Ajax.

Simplified HTML Code

<select class="form-control" ng-model="id_professional"
        ng-options="professional.ID as professional.NAME for professional in listProfessionals">
   <option value="">Select...</option>
</select>

$scope.listProfessionals Data

[
{ID: "700003655490405", NAME: "Jhon"},
{ID: "700003655490406", NAME: "Lucas"},
{ID: "700003655490407", NAME: "James"},
{ID: "700003655490408", NAME: "Michael"}
]

After populating the list, the default selected item is always "Michael."

I have already attempted a potential solution linked here, but unfortunately, it did not work: Why dropdown selecting last value

Answer №1

Upon investigation, I finally discovered the cause of the bug, and I am embarrassed to admit that it was simply a typo on my part. The two sleepless nights really took a toll on me.

The issue stemmed from the Ajax response having a property named IDN instead of ID like professional.ID (which was undefined). By replacing professional.ID with professional.IDN in ng-options, I was able to resolve the problem.

Apologies for any confusion caused. Thank you all for your assistance!

<select class="form-control" ng-model="id_professional"
        ng-options="professional.IDN as professional.NAME for professional in listProfessionals">
   <option value="">Select...</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

Having trouble storing data accurately in local storage using React

I implemented a combination of useContext and useEffect to store useContext data in local storage, but I am facing challenges due to conditional rendering. The scenario involves displaying a sign-in button when the user is not logged in and a log-out butto ...

What is the reason for using a callback as a condition in the ternary operator for the Material UI Dialog component?

I am in the process of reconstructing the Material UI Customized Dialog component based on the instructions provided in this particular section of the documentation. However, I am unable to grasp the purpose behind using a callback function onClose conditi ...

Mastering the Art of Unit Testing JavaScript Asynchronous Code with Jasmine Mocking

Hello, I recently started learning JS and encountered a problem while testing asynchronous methods with jasmine mocking. Below is the code snippet I am trying to test: test.factory('service', ['$http', '$q', function($http, ...

Encountering difficulties accessing the array in the controller through ajax

Having trouble receiving an array of data from AJAX to the controller. $.ajax({ type: "POST", url: "/Home/List", traditional: true, contentType: 'application/json', data: { "Query&quo ...

Why is the imported package not being recognized in the namespace declaration of my Node.js TypeScript file?

Currently, I am utilizing the WebStorm IDE developed by JetBrains to modify a TypeScript file within a Node.js v8.6.0 project. The JavaScript version set for this project is JSX Harmony. In the beginning of the TypeScript source file, there is an import st ...

Identifying 404 image status in AngularJS triggering by a button press

One question I have is about a button directive that I am working with: <button-data></button-data> The template for the button data directive looks like this: <div class="buttonDiv"> <a ng-show="!isSomthing" class="{{className}}" ...

Tips for sending an Ajax request to a separate URL on the same server

When making an ajax request to my server, I use the following code: var data = ''; $.ajax({ type: 'GET', url: 'api/getnews/home/post/'+title, data: data, datatype: 'json', success: f ...

Display a dropdown list using ng-repeat to prevent selecting the same value multiple times

Within my ng-repeat loop, I have a drop-down menu and an add button that allows users to add new drop-down menus to the list. However, I am looking for a way to restrict the second drop-down menu from selecting the same value as the first one. In other wor ...

Personalizing the BACK BUTTON on a mobile phone using onsen UI

In our ONSEN UI app, we utilize a sliding menu and Navigator to display page content. We now want to modify the functionality so that when users press the PHONE BACK KEY, instead of closing the app, they are redirected to the home page. If the user is alre ...

JavaScript - Combine objects by summing values with matching keys

Below is the given array : [ { "Date": "2019.07.08", "Organisation": "A", "Client": "Client1", "Product": "Pen", "Quantity": "1120" }, { "Date": "2019.07.08", "Organisation": "A", "Client": "Client1", "Product": " ...

AngularJS is encountering a problem with its filter functionality, particularly when trying to filter using a combination of uppercase and lowercase letters

Dealing with an issue in angularjs 1.6 related to filtering I attempted to use toLowerCase() on an array of items but it didn't work. Can anyone assist me with how to resolve this problem in the filter. Below is the code snippet, <input type="te ...

Is there a way I can ensure the values are loaded when the page loads, rather than displaying NaN?

I've recently created a car rental calculator for a client, and it's almost complete. Everything is working smoothly, from the calculations to the conditions. However, I'm facing an issue where the price isn't calculated on page load. I ...

The Jquery .clone() function presents issues in Internet Explorer and Chrome browsers, failing to perform as expected

I need to duplicate an HTML control and then add it to another control. Here is the code I have written: ko.bindingHandlers.multiFileUpload = { init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { va ...

Interactive game created using JavaScript input

I've scoured the internet for guidance on creating a text-based game that utilizes user input, but all I come across are tutorials focusing on button interactions. What I envision is triggering different responses based on specific user inputs. For i ...

Utilize JavaScript's $.post function to export PHP $_POST data directly into a file

After spending hours trying to figure this out, I've come to the realization that I am a complete beginner with little to no knowledge of what I'm doing... The issue I'm facing is related to some JavaScript code being triggered by a button ...

Issue with Jquery Crop: image not updating when using cropper

Here is the code I'm working with: <link rel="stylesheet" href="style.css"> <script src="/static/js/jquery/2.1.4/jquery.min.js"></script> <script src="http://fengyuanchen.github.io/cropper/js/cropper.min.js"></script> &l ...

What is the best way to implement sorting in a table using react virtualized?

I've been working on implementing sorting in my project using the table sorting demo available on Github. Here is the code I'm using: import React from 'react'; import PropTypes from 'prop-types'; import { Table, Column, Sor ...

Do not directly change a prop - VueJS Datatable

Just starting out on Vue JS and encountered an issue while trying to create a Data Table by passing parent props to child components. An Error Occurred: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent ...

An issue occurred during compilation with 1 error: The required dependency could not be located

Encountering an issue in a Vue component while attempting to import another JavaScript file located in the services/AuthenticationService directory. Error message: Module not found: Error: Can't resolve '@/services/AuthenticationService'. ...

Avoid re-rendering the page in Nuxt when adjusting dynamic parameters

My page has two dynamic parameters that trigger the fetch method to run again when the URL params are changed. I want to avoid this behavior. Fetch Method: async fetch() { await this.getFlightResult(); } Get Result Method: async getResult() { th ...