The issue with ng-change is causing the previously selected drop down option to be cleared

After successfully implementing live searching with ng-change, I encountered an issue with a pre-selected drop-down box.

Despite setting the selected="selected" attribute to make option three the default selection, the drop-down box jumps to the top option when the page loads. I need it to stay on option three.

<html>
<body >

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js" type="text/javascript"></script>

<script type="text/javascript">
  angular.module('myApp', [])
       .controller('Ctrl', function ($scope, $http)
       {
       });
</script>

<form name="aspnetForm" method="post" action="./Test2.aspx" id="aspnetForm">

  <div ng-app="myApp" ng-controller="Ctrl">
    <select name="DropDownTest" id="DropDownTest" ng-model="LiveSearchOptions" ng-change="SearchFieldChanged()">
      <option value="">ALL</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3" selected="selected">Three</option>
      <option value="4">Four</option>
      <option value="5">Five</option>
    </select>
  </div>

</form>

Removing the module (by deleting the script tags) resolves the issue. Can someone please provide guidance? I am new to this!

Check out the JS Fiddle for experimentation: https://jsfiddle.net/4to3ux4g/14/

Answer №1

The controller has been linked to an ng-model. As a result, the selected attribute is being replaced by the value in the ng-model

 angular.module('myApp', [])
  .controller('Ctrl', function ($scope, $http)
  {
     $scope.LiveSearchOptions = '3';
  });

Fiddle: https://jsfiddle.net/BoyWithSilverWings/bbsymmr8/1/

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

What is the best way to target changing elements displayed by *ngIf?

Trying to access a dynamic element generated by ngIf in the code below has proven to be challenging. I attempted two different methods: Using ElementRef and querySelector Component template: `<div class="test" *ngIf="expr"> <a id="b ...

Blueprint for Multi-User Application with Mongoose Schema

I am in the process of designing a schema for a multi-user application that will be developed using MongoDB, Express, AngularJS, and NodeJS. This application will cater to four different types of users: GUEST, REGISTERED_USER, SUBSCRIBER, and ADMIN. Once a ...

Efficiently sharing services in AngularJS across controllers without requiring multiple service calls

Currently, I am working on a project that involves the use of AngularJS. During the development of the module, I found myself needing to reuse data provided by a service in two separate controllers. I have a controller named Ctrl1 that interacts with an A ...

Query Using AngularJS for Multiple Selection

I am facing an issue with my Angular Search app. When I try to add multiple selection boxes, they do not work cumulatively. For example, if I select "Cervical" in the first box and then "Muscle" in the second box, it unselects "Cervical". What should I be ...

Using Angular directives to pre-select a default option

I am currently working on a select HTML tag with two options, and I want to set the first option as the default choice. My select element includes Angular directives like ng-change and ng-model. I have attempted to achieve this by adding selected = "select ...

Struggling to modify a document in a MongoDB collection with an HTTP Put request?

I've recently started working with AngularJS and I encountered an issue while trying to update my MongoDB Database. I'm facing a problem when attempting to update an object within my collection. The code snippet below showcases my approach: //li ...

Having trouble running the d3js example on Ionic 2

I am having trouble running the example provided in this link: https://github.com/abritopach/ionic2-d3js-example Even after installing the latest Ionic 2 version and npm, I encounter an error when trying to run the app, as shown in the browser console. p ...

What is the best way to convert a dynamic HTML table with input fields into an Excel spreadsheet?

I have developed a JavaScript function to convert an HTML table into an Excel sheet. However, I am facing an issue where some fields in the table are enclosed in input tags instead of td tags, causing them to not appear in the Excel sheet. function expo ...

Determining the cursor location within a character in a div that is content editable using AngularJS

I am facing challenges with obtaining the cursor caret position within a contenteditable div. Currently, I am utilizing the following function : onBlurArea (field, ev) { ev.preventDefault() const editable = ev.target.childNodes[1].childNodes[2] ...

I'm currently learning about things that never change and struggling to grasp their meaning

I'm currently delving into the world of immutable.js record and trying to wrap my head around it. However, this particular piece of code is really throwing me for a loop. Here's my Question: I understand [import, export,const], but what ex ...

What is the best way to assign a JavaScript return value to a PHP variable?

Is it possible to capture the return value of a JavaScript function that checks if text boxes are empty and assign it to a PHP variable? I have successfully created a JavaScript function that returns false if any of the text boxes are empty, but now I ne ...

Javascript text validation is malfunctioning as the alert message fails to appear

Looking for a simple form validation script: <script language=”javascript”> function checkForm(register) { if (""==document.forms.register.FNAME.value){ alert("Please fill out this field!"); document.forms.register.FNAME.focus( ...

Leveraging Bootstrap within an Angular 17 project

What is the process to integrate Bootstrap into an Angular-17 application using CLI? I attempted to install Bootstrap globally by running npm install -g bootstrap and then added necessary lines in angular.json under style and script. "node_modules/bo ...

Error: Unable to locate module - The specified file cannot be resolved when utilizing an external JavaScript library

I am currently integrating a WYSIWYG editor (TUI Editor) into my Angular2+ application. Since there is no official Angular wrapper available, I have decided to create my own based on an existing wrapper. Due to some installation issues with npm, I saved t ...

Troubleshooting issues with the Bootstrap dropdown menu

I am struggling to get a dropdown menu working properly with Bootstrap. Despite looking through similar questions on this forum, I have not yet found a solution that works for me. Below is the HTML head section of my code: <!DOCTYPE html PUBLIC '- ...

Values returned by XmlHttpRequest

When it comes to returning data from an XmlHttpRequest, there are several options to consider. Here's a breakdown: Plain HTML: The request can format the data and return it in a user-friendly way. Advantage: Easy for the calling page to consume ...

Optimizing Angular.js templates for faster loading using Node.js pre-compilation

As I delve into learning Angular and integrating it with my current Node.js framework, I find myself facing some challenges. Previously, I utilized Handlebars.js as my templating engine in Node.js, where I would build the context on the server side and the ...

Prevent textArea from reducing empty spaces

I am facing an issue with my TextEdit application set to Plain Text mode. When I copy and paste text from TextEdit into a textarea within an HTML form, the multiple spaces get shrunk. How can I prevent the textarea from altering the spacing in the text? T ...

Do you require assistance with creating an image slideshow?

My first day working with HTML was a success as I successfully built a navigation bar that looks pretty cool. Take a look at it here. Next on my list is to incorporate a slideshow into my site, possibly using JavaScript or jQuery plugins. I'm aiming ...

Call a function between two controllers by utilizing routeprovider

I have set up my route provider with AngularJS as shown below: var appModule = angular.module('ngLogin', ['ngRoute','restangular','btford.socket-io','ngSanitize','xeditable']); appModule.config( ...