AngularJS: Dropdown menu not binding properly in Google Chrome

Check out this straightforward form that utilizes AngularJS.

In FireFox (version 30.0) and IE (version 11.0.9600.17207), selecting "Yes, No, No" in the drop-down boxes displays "true, false, false" as expected.

However, in Chrome (version 36.0.1985.125 m), it shows "true, true, true."

Any thoughts on what could be going wrong?

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="testApp">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <title></title>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        var testApp = angular.module('testApp', []);

        testApp.controller('Ctl1', [
            '$scope',
            function($scope) {

                $scope.questions = [{ id: 1, value: null }, { id: 2, value: null }, { id: 3, value: null }];

                $scope.submit = function() {
                    var results = [];
                    angular.forEach($scope.questions, function(v, k) {
                        results.push(v.value);
                    });
                    console.log(results);
                    $scope.results = results;
                }
            }]);

    </script>
</head>
<body>
    <div ng-controller="Ctl1">

        <h1>Page 1</h1>

        <form ng-submit="submit()">
            <p ng-repeat="item in questions">
                <select ng-model="item.value">
                    <option value="true">Yes</option>
                    <option value="false">No</option>
                </select>
            </p>
            <p>
                <button type="submit">Submit</button>
            </p>
        </form>

        <h1>Page 2</h1>

        <p ng-repeat="item in results track by $index">{{ item }}</p>

    </div>
</body>
</html>

Answer №2

After some investigation, I managed to simplify the given example and come up with a workaround.

Here's the revised code snippet:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="testApp">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <title></title>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        var testApp = angular.module( 'testApp', [] );

        testApp.controller( 'Ctl1', [
            '$scope',
            function ( $scope ) {
                $scope.value = null;
            }] );

    </script>
</head>
<body>
    <div ng-controller="Ctl1">

        <p>Value: {{ value }}</p>

        <select ng-model="value">
            <option value="true">Yes</option>
            <option value="false">No</option>
        </select>

    </div>
</body>
</html>

Follow these steps to replicate the issue:

  1. Open the page using Google Chrome
  2. Use the keyboard to navigate to the drop-down list
  3. Press the "arrow down" key twice

Check out the live demo here: http://jsfiddle.net/QBjkB/

To resolve this issue, I initialized the variable "value" with an empty string:

function ( $scope ) {
    $scope.value = '';
}

In addition, I included an option with an empty value in the drop-down list:

<select ng-model="value">
    <option value="">---</option>
    <option value="true">Yes</option>
    <option value="false">No</option>
</select>

Thank you all for your helpful suggestions!

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

Issues encountered with commands not functioning in Discord.js v13 Timeout.js

I'm facing an issue with the message embed in my timeout command, and I keep getting an error message! I've included all the necessary files and commands below. Any help would be greatly appreciated! Here is the Error Message: TypeError: comman ...

Grab a parameter from the URL and insert it into an element before smoothly scrolling down to that

On a button, I have a URL that looks like this: www.mywebsite.com/infopage?scrollTo=section-header&#tab3 After clicking the button, it takes me to the URL above and opens up the tab labeled tab3, just as expected. However, I would like it to direct m ...

modify the color of a box within a grid upon clicking it

I am curious if it is possible to change the color of a box when it is clicked. I am working on coding a "calculator layout" and would like to start with this part 1 2 3 4 5 6 7 8 9 0 This is what I have been working on and struggling with. $(docume ...

- Tips for preventing requests from being blocked in Node.js

Greetings! I recently crafted a straightforward Node.js server: const express = require('express') const app = express() app.use(express.json()) app.get('/otherget', (req,res) => { ...

Bootstrap Popover not displaying information after an AJAX request

I'm struggling to update the popovers contents with Ajax result in my ASP.Net MVC4 project. Using ASP.Net (MVC4): public ActionResult GetEmployeeDetails(string employeeId) { var contract = UnitOfWork.ContractRepository.ContractBu ...

What is the best way to animate an element when it mounts in Vue?

My current code snippet is as follows... <template> <div class="layered-image fit"> <img src="/img/Stars-background.svg" class="img1"/> <img ref="img2" src="/img/Mo-zen.svg" c ...

Having trouble decoding invalid JSON received from the Twilio API

For the past 4 hours, I've been struggling to parse a basic JSON from Twilio. The process is as follows: A text message containing a magnet link is sent Twilio forwards the request to my serverless function in the cloud I attempt to parse the reques ...

Is it possible to use jQuery animation to smoothly transition the background color?

I'm currently working on a function to dynamically change the background color of a div based on an array of colors. Here's what I have so far: HTML: <div class="bg-color"> CSS: .bg-color { width: 500px; height: 500p ...

Can the orientation of the card reveal be customized in Materializecss?

Exploring the card-reveal feature in the materializecss framework on this page: https://codepen.io/JP_juniordeveloperaki/pen/YXRyvZ with official documentation located at: In my project, I've rearranged the <div class="card-content"> to display ...

What is the best way to eliminate particular elements from a nested JSON payload in JavaScript?

I am in need of creating a function that can scan through a nested JSON structure to locate specific elements and delete all occurrences of those elements, even if they are within an array. Consider this JSON example: { "userId": "John991", "grou ...

Words next to picture

Can someone help me with aligning different images of varying widths but the same height inline with text next to each image? I tried to do it, but it doesn't look good on responsive screens. Any suggestions on how to fix this? And if there's a b ...

Utilizing a service as the scope for an AngularJS directive

I'm facing a simple issue with my view that became more complex when I attempted to create my first directive in Angular. The problem lies in a service that returns an array of user roles for the current user. Most users will only have the user role, ...

What function does the express res.get(field) method serve?

I came across some code snippets demonstrating the use of express res.get(field) Is this method primarily for debugging purposes or are there other applications? The sample code that caught my eye can be found at this link. Here is a snippet of it: var e ...

Preventing jQuery from Delaying Hover Effects

I am currently working on a navigation menu where two images are stacked on top of each other, and jQuery is used to create a fade effect on hover. However, I have encountered an issue where the effects buffer if the mouse cursor is moved back and forth ov ...

Using $cordovaContacts inside an AngularJS service

I am attempting to utilize the $cordovaContacts service provided by the ngCordova module. My goal is to retrieve phone contacts within a service so that I can access them across various controllers. Service.js angular.module("services", ['ngCordova& ...

The filter on the mobile version is not displaying correctly

When I select a category in the input filter, only items with the same category are displayed when clicked. However, when I click on "Others" on the desktop version, only rows with that category are shown, but on mobile after resizing and filtering, nothin ...

Sending arguments to a JavaScript function together with a callback

I have a link on my HTML page that looks like this: <a id="save_report" href="javascript:void(0);" title="Save Report" onclick="javascript:enterReportNameToSave(<?php echo $upload_count?>,<?php echo $startOffset;?>,<?php echo $affiliateI ...

Create a custom shader material to display a video with THREE

As I embark on loading a video onto an animated WebGL plane with a custom shader material, my approach involves using a pre-loaded video to draw an image onto a canvas and then passing it to my shader uniforms in the render loop: // Render loop useFrame(( ...

Clicking will cycle through the array and display each item one

I currently have an array of website URLs which includes: var urls = ["http://www.getbootstrap.com","http://www.reddit.com","http://www.bbc.com/news","http://www.google.com"]; In addition, there is an embedded iframe on the page: <iframe></ifra ...

Learn how to use a function in Google Maps to calculate and display distances

I have a script obtained from this link here and I am trying to create a function that returns the distance. This is my current script: var calcRoute = function(origin, destination) { var dist; var directionsDisplay; var directionsService = ne ...