Dropdown element vanishes upon selecting in HTML

Utilizing Angular's ng-init to populate a rest call function and populate $scope.races before filling up the dropdown.

Initially, everything appears to be working correctly. However, upon selecting an option from the dropdown menu, it immediately clears.

I suspect that somehow $scope.races is being emptied.

This is the Angular controller code snippet:

angular.module('MyApp', [])
.controller('RestController', function($scope, $http) {

    $scope.getRaces = function() {
        $http.get('http://localhost:8080/races').
        success(function(data) {
            $scope.races = data;
        });
    }
});

Here is the HTML markup:

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="restController.js"></script>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body ng-app="MyApp" ng-controller="RestController">
<div class="container-fluid" ng-init="getRaces()">
    <select ng-model="races">
        <option ng-repeat="race in races" value="{{race.raceId}}">{{race.raceName}}</option>
    </select>
</div>
</body>
</html>

Answer №1

Make sure to remove the ng-model="races" as you are resetting it in this section of code. Here is a functional example:

   <!doctype html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="restController.js"></script>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    </head>

    <body ng-app="MyApp" ng-controller="RestController">
    <div class="container-fluid" ng-init="getRaces()">
        <select>
            <option ng-repeat="race in races" value="{{race.raceId}}">{{race.raceName}}</option>
        </select>
    </div>
    <script>
    angular.module('MyApp', [])
    .controller('RestController', function($scope, $http) {

      $scope.getRaces = function() {
        var data = [{raceId:'1',raceName:'nam1'},{raceId:'12',raceName:'nam2'},{raceId:'13',raceName:'nam13'}];//get data from http
        $scope.races = data;
          // $http.get('http://localhost:8080/races').
          // success(function(data) {
          //     $scope.races = data;
          // });
      }
    });
    </script>
    </body>
    </html>

Answer №2

Your problem stems from the fact that ng-model="races" in your select tag is conflicting with $scope.races in your restController.js when an option is chosen. Change ng-model="races" to a more specific name like ng-model="racesSelection" and utilize this variable to track the selected option.

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

Firestore query is returning empty results upon page initialization, but provides data upon subsequent re-renders in React Native

ISSUE I'm encountering an issue where I am unable to fetch documents from a Firestore collection when the page loads. Despite executing the query multiple times during loading, it does not return any results. However, if I trigger the query by changi ...

A customized Javascript application designed specifically for Blackberry Bold users, enabling them to effortlessly choose a country and seamlessly enter a correctly formatted zip code in the designated text field

I am currently developing a mobile web app for Blackberry Bold 9700 & 9650 devices running on the 5.0 browser. The main functionality of the app involves allowing users to select either US or Canada from a drop-down menu. Based on their selection, the ...

Encountering an error when utilizing Firefox version 35 with protractor

When running my Angular app scenarios with Chrome, everything runs smoothly. However, I encounter a halt when trying to run the scenarios on Firefox version 35.0b6. Any help would be greatly appreciated. Thank you in advance. I am currently using Protract ...

Encountering an illegal invocation error in jQuery

Recently delving into the world of jQuery, I am attempting to call a C# function from JavaScript using AJAX and jQuery. Additionally, I need to pass some parameters while making the call to the C# function. Here is how I am attempting to achieve this: var ...

Get the maximum width in pixels through JavaScript when it is specified in different units within the CSS

I'm looking to retrieve the max-width value in px from CSS for use in a JavaScript code. The challenge is that this value might be specified in different units in the CSS file. Any suggestions on how to achieve this using JavaScript? const element = ...

The specified dependency, * core-js/fn/symbol, could not be located

I am in the process of developing a Vue.js application with Vuex and have encountered some errors during the build. I attempted to resolve the issue by installing npm install --save core-js/fn/symbol, but unfortunately, it did not work as expected. https:/ ...

Using CSS and JavaScript to hide a div element

In my one-page website, I have a fixed side navigation bar within a div that is initially hidden using the display:none property. Is there a way to make this side nav appear when the user scrolls to a specific section of the page, like when reaching the # ...

Mongoose encountered an error when attempting to cast the value "......" as an ObjectId in the "author" path. The error was caused by a BSONError

I'm currently facing an issue with Mongoose in my NextJS project. Specifically, I am encountering a problem when trying to save a document where one of the fields references an ObjectId. The error message I receive is as follows: Cast to ObjectId fail ...

What will the relationships be like between the models using Sequelize?

Hello there, I'm seeking assistance in establishing the correct associations between models using Sequelize. In my project, I have three types of products, each with unique attributes as well as shared attributes. ...

Step-by-step guide on clipping a path from an image and adjusting the brightness of the remaining unclipped area

Struggling to use clip-path to create a QR code scanner effect on an image. I've tried multiple approaches but can't seem to get it right. Here's what I'm aiming for: https://i.stack.imgur.com/UFcLQ.png I want to clip a square shape f ...

Navigating the complexities of integrating Angular-based JS select/input values using CefSharp Offscreen on an external website: A comprehensive guide

I have encountered some challenges with setting input values on a third-party webpage that utilizes Angular for field validation. When attempting to set the value attribute using Chrome or CefSharp, the value does not update as expected. To work around th ...

The utilization of "startIcon" and "endIcon" from the <Button/> API of Material-UI is restricted

I've been trying to work with this React code for a single component, but no matter what I do, I keep getting the same warning. I even tried copying and pasting the example, but the warning persists and the icon is not showing up. Can someone please a ...

Error 400 when uploading files in Angular2 using multipart/form-data

When attempting to upload a file along with some meta information using multipart/form-data, the format should look like this: Header ----boundary Meta ----boundary File ----boundary Despite following this format, I consistently receive a 400 Error from ...

Using Node JS to retrieve JSON data from index.html upon button click

I'm currently learning the ropes of Node.js and want to set up a server where users can navigate to http://localhost:8000/ and be directed to index.html. In that file, there's a button to access JSON data. I plan to download this JSON data onto m ...

Transferring information from AngularJS to WordPress through AJAX communication

I am looking for a way to transfer data from AngularJS to WordPress using AJAX. Within my Angular code, I have the following data: $scope.registrations.push({ id_associate: '1', activity:'demo1', qty:"1" }); $scope.registrations.push( ...

Interactive webpages with dynamic HTML content, similar to the design of popular platforms such

Explore the source code of Dropbox's homepage or any Soundcloud page. They utilize various scripts and minimal pure HTML content (article, main, p, div). This method of generating pages is referred to as dynamic content/HTML. The main function seems ...

Several treeviews for selecting data

I need some help with a specific assignment. The back end code is all set, but I'm struggling with the UI component. The task requires two tree views, one on the left and one on the right. The left tree view will contain states with multiple children, ...

Expanding Image with HTML and CSS: A Guide

In the process of creating my website, I encountered an issue with the logo placement. I wanted the logo to be in the top left corner, similar to the one shown in this image. Initially, everything was working fine until I made some adjustments to move the ...

Ways to emphasize search outcomes in Flask/HTML?

I am currently working on creating a search box using HTML and the Flask framework in Python. Below is the layout I am working with: Layout My goal is to input text into the search box and have it highlighted within the text area on the same HTML page. F ...

What is preventing my accordion from closing completely?

I'm currently working on creating FAQ questions in an accordion format. However, I've encountered an issue where adding padding around the answer section prevents the accordion from closing completely. Removing the padding solves the problem, but ...