Why isn't my ng-model value in AngularyJs properly setting the selected option?

My select element has four options. The initial value is set using ng-init, and once set, the user can only change it from that point on. While my initial functions successfully accept the value set by ng-init and are able to change it, the selected value is not displaying.

<select name="resultShow" class="result-show" ng-init="resultShow=25" ng-change="updateProd(resultShow,prodState,prodType,prodStyle,prodBrand,keywords)" ng-model="resultShow">
    <option value="25">25</option>
    <option value="50">50</option>
    <option value="75">75</option>
    <option value="100">100</option>
</select>
javascriptangularjsangular-ngmodel

Answer №1

The reason for this behavior is that select will automatically insert a default option if the viewValue of the model does not match any of the options in the select dropdown.

In this case, the viewValue of resultShow = 25 is set to 25 as a number data type.

Currently, select can only bind to values with a data type of string, causing a mismatch in this scenario. To resolve this issue, we must change the viewValue of resultShow to '25' as a string data type.

ng-init ="resultShow = '25'"

This code snippet will populate the select dropdown correctly, but it will also change the datatype of the value.

To work around this problem, try setting $scope.resultShow = 25 in your controller. This should fix the issue.

Furthermore, select will remove the empty option it inserted once the correct viewValue is determined.

Answer №2

Take a look at this code snippet. I have implemented the use of ng-change to monitor any changes. Within this function, I am logging the value of resultShow to track the selected option value.

Check out the Fiddle Demo here

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

Exploring the world of React-Bootstrap elements and properties

I'm currently diving into a Bootstrap home project and it's my first time working with Bootstrap. I came across a tag that has an 'inverse' attribute among others like 'fixedTop', 'fluid', and 'collapseOnSelect& ...

javascriptreactjs

Can you include the dollar symbol in the currency format?

I currently have this code that formats numbers into currency format, however I would like to include the dollar sign ($) before the numbers. document.getElementById("numbers").onblur = function (){ this.value = parseFloat(this.value.r ...

javascripthtmlnumberscurrency

The z-index overlapping problem in webkit browsers is a result of Angular 7 animations

I have implemented staggered animations in my Angular 7 application to bring elements to life upon page load. However, I am facing a strange z-index problem with one of my components. Here is the animation code: @Component({ selector: 'track-page& ...

javascriptcssangularcss-animationsangular-animations

Bootstrap Carousel is unable to display any items as the count returns zero

I'm having trouble determining the total number of items in a Bootstrap carousel, as my code consistently returns 0: var totalItems = $('.carousel-item').length; The data-ride attribute is specified in the parent div: <div id="carous ...

javascriptjquerybootstrap-4carousel

Sending an AJAX request from JavaScript to a user control in ASP.NET

JavaScript Function: function CreateProposal(GetProposal, ProductName, ProductID) { $.ajax({ type: "POST", url: "Page.ascx/Proposal", data: JSON.stringify({ GetProposal: GetProposal, ProductName: ProductName, ProductID: ProductID ...

javascriptc#asp.netajax

Internet Explorer 6 doesn't allow for DOM manipulation of the created combobox in Ajax time

When making an async request on a website, the response is parsed into a select field where the option gets selected once the DOM nodes are ready. This process works perfectly on all browsers except for Internet Explorer 6, which presents some strange beha ...

javascriptinternet-explorerlegacy

Encountered a glitch while trying to install React JS using npx create-react-app xyz

After entering the command in the terminal, I encountered an error stating: npm Err! code-ENOENT npm Err! syscall lstat npm Err! path Interestingly, this same command worked perfectly on my instructor's laptops. For reference, I have attached a snaps ...

javascriptreactjsnpmnpm-install

Formatting JSON Date Output in a Unique Style

I am sending an api request and I would like to present the date in a similar format to what can be seen at this link: Here is the json data I am receiving: dates: { start: { localDate: "2017-04-06", localTime: "19:31 ...

javascriptjsonapireactjsdom

Having trouble submitting a form in React JS

I'm facing an issue with my form where I am trying to print the data in console upon submission, but for some reason it's not working. The form is not submitting and I can't figure out why. Below is the code I have written. Any help would be ...

javascriptreactjsformsmaterial-uireact-forms

CSS - Achieving full width on hover even when the element has a specified width setting

I am encountering an issue with my CSS. Although I have successfully centered everything, I am facing a problem with the hover effect in CSS. Whenever I apply the active class or hover over an li element, the background color expands to 100%. Additionally, ...

javascripthtmlcss

Undefined is returned when exporting an item from the function called 'this'

Here we have two examples of JavaScript functions. In the first one, console.log(this) works as expected and returns methods, variables, etc. function foo() { console.log(this); } foo(); However, in the second example: export const something = ' ...

javascriptnode.js

Leveraging TypeScript in Angular 4 for parsing response data

I have received the following response data: { "content": [{ "id": 1, "userName": "v7001", "status": 1, "userInfo": { "id": 1, "fullName": "Naruto Uzumaki", "firstName": "Naruto", "lastName": "Uzumaki", "add ...

javascriptangulartypescript

Enhance the functionality of your React app by making the `<Paper>` component in Material UI clickable

I'm trying to figure out how to make a Paper component clickable. I attempted to set an id property in the tag like () and then utilize the DOM to add an event listener, but it's not working. I've hit a roadblock and I'm running out of ...

javascriptreactjsmaterial-uidom-events

Is the contact form confirmation message displaying too prominently?

I am currently troubleshooting two different forms on a website I'm developing, and I am unsure of the exact cause of the issue. Form 1: Form 2: When attempting to submit Form 1 without entering any information, an error message is displayed exactl ...

javascripthtmlcss

Retrieve information from the preceding page and send it alongside additional input in a form using jquery or javascript

Seeking assistance with a particular issue and would appreciate any help provided. I will do my best to keep things simple in my explanation, apologizing in advance for any errors in English. To begin, I have a blog page dedicated to interior design featu ...

javascripthtmljquery

Working with the Response Object in Django/JQuery and passing it to javascript using Urllib3

I am facing a challenge in downloading headlines from BBC using Ajax and jQuery in Django. I am attempting to use Urllib3 to create a request for the RSS/XML Top News data from the BBC website available at this link: '' Although I believe I hav ...

javascriptjqueryhtmldjangorss

VUE- the GetElementByClassName function is malfunctioning

I attempted to utilize 'getelementbyclassname' within VUE methods. My reason for doing so is that instead of applying information using :style, I would like to adjust the width of the div where I applied my class named 'classon'. I ...

javascriptvue.jsdata-visualization

Working solely with CDNs, harness Vuetify alongside i18n for enhanced features

Currently, I am developing a Vue project within a static environment that lacks Node or Vue-cli support. In order to utilize Vue, Vuetify, and vue-i18n, we are incorporating them through CDNs. Our goal is to translate the Vuetify components using Vue-i18n ...

javascriptvue.jsvuetify.jsvue-i18n

"Provider not recognized: aProvider <- a" How can I locate the initial provider?

While loading the minified version of my AngularJS application, an error appeared in the console: Unknown provider: aProvider <- a This issue is due to variable name mangling. The unminified version works properly, but I prefer to use variable name ma ...

angularjsgoogle-chromeuglifyjssource-maps

Communication across various services

How can I trigger a broadcast from one service to another? .factory('BetSlipFactory', function() removeSlip: function(slip) { $rootScope.$broadcast('removeSlip:betSlipFactory'); return betSlipSelectionRequest('/betSli ...

javascriptangularjs