Issue with displaying progress bar value when using AngularJS on Microsoft Edge with HTML5

I'm facing an issue with a progress bar on my website. The maximum value is set to 100, and the dynamic value is set on page load. It functions properly on Firefox, Chrome, and Safari, but on Microsoft Edge, the value always shows as 0. Here's the HTML code snippet that is within an ng-repeat:

<progress max="100" value={{element.progress}}></progress>

The element.progress variable is always an integer value. When I inspect it in the Edge developer tools, it displays as 0. Other functionalities on the website work fine, and all values are displayed correctly except for the progress bar. Interestingly, if I use document.getElementById and manually set the value in the console, it works as expected.

javascriptcssangularjshtmlmicrosoft-edge

Answer №1

Consider utilizing ng-value in place of value attribute

<progress max="100" ng-value="element.progress"></progress>

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

In IE11, using flex-direction column can cause flex items to overlap

Encountering a problem with flexbox in IE11. The flex-items overlap when using flex-direction: column: https://i.sstatic.net/fHBw0.png In chrome and safari, it appears like this: https://i.sstatic.net/c2h7P.png .container { display: flex; flex-d ...

htmlcssinternet-explorerflexboxinternet-explorer-11

There was an error encountered when attempting to parse the JSON data due to an unexpected token 'l' at position 0

I am attempting to display JSON values in a dropdown list that is nested inside a table. The JSON values I am working with can take the following form: var ids1 = [{"pid":"23221","des":"2321"},{"pid":"1301","des":"1301"},{"pid":"1003","des":"1003"}] va ...

javascriptjqueryhtmljavascript-objects

Triggering a gTag Event on the Fly using Google Tag Manager

I implemented a script that triggers a dynamic gTag.js AdWords conversion based on various user interactions on my webpage. Everything was working smoothly until I switched to Google Tag Manager. Now, the code snippet: gtag('event', 'convers ...

javascriptgoogle-tag-managergtag.js

Working with jQuery conditionals to manipulate JSON data

I'm working with JSON data that includes a field like this: "first_date": "2015-06-02" Using jQuery, I want to achieve something like this: if( valueOfFirstDate.substring(5, 6) == "06" ){ //change 06 to "June" } Can anyone guide me on how to e ...

javascriptjqueryjson

The issue of THREE.js failing to render .obj files with .mtl files has been a common problem when exporting assets

After further investigation, it seems that the issue lies with the exported files and their formatting, although I am unsure of the exact problem. Interestingly, additional example models I downloaded render perfectly fine. I have encountered a problem wi ...

javascriptthree.js.obj3ds

Persistent session cookie remains on IOS mobile devices despite attempts to delete it

Employing node.js express library to eliminate the cookie upon logout app.post('/logout', (req, res, next) => { // utilizing cookie-session library thus req.session = null is acceptable req.session = null; res.clearCook ...

javascriptnode.jsexpresscookiessession-cookies

The element's type is not valid: it should be a string or a class/function for composite components, but instead it is an object

Currently, I am learning React.js through some tutorials and I am relatively new to this technology. In one of my files named dashboard.js, I have the following code: import React from 'react'; import NewChatComponent from '../newChat/newCh ...

javascriptreactjsreact-native

Guide to monitoring the modifications made in a DNN text editor within a web form before submitting the page

In my endeavor to develop a JavaScript function that monitors changes made in a web form when the page is submitted, I have encountered an issue. While for regular .NET textbox or textarea fields, I can compare the value with the default value using the fo ...

asp.netjavascriptrichtextboxtext-editordotnetnuke

JavaScript Calendar and Clock Selector

I've been scouring every corner of the internet, but I can't seem to locate what I'm after. My quest is for a basic Date and time picker along with a standalone time picker that harnesses the power of JavaScript. My webpage is built using ...

javascripthtmldatetimetimedatepicker

Tips for including an external .js file in a .php file

In an attempt to call a JavaScript function located in an external file, I am facing some issues. Here is my folder structure: C:\xampp\htdocs\test\index.php C:\xampp\htdocs\test\js\functions.js index.php &l ...

javascriptphp

The resizing of the window does not trigger any changes in the jQuery functions

Here is a snippet of jQuery code that executes one function when the window size is large (>=1024) and another when it is resized to be small. Although the console.logs behave as expected on resize, the functions themselves do not change. This means th ...

javascriptjquery

Executing a transaction in Firestore

I am currently developing an application that utilizes Firestore to store user data. One issue we are facing is that writing data to a Firestore document is not in real time, which becomes problematic with higher write frequencies. To address this issue, ...

javascriptnode.jsfirebasegoogle-cloud-firestore

Alter the class when $dirty occurs in Angular

I've recently started working with angular js and am attempting to incorporate animations into my login page. I have created a controller that will modify the class of the input field when clicked and when blurred. app.controller("con", function($sc ...

javascriptangularjs

Ways to Customize the Text Color in the Navigation Bar

Is there a way to change the color of text in my navigation bar to #b3b3b3? It seems like I am limited to the colors provided by bootstrap. How can I work around this limitation? <nav class="navbar" style="color: #b3b3b3; background-col ...

htmlcssbootstrap-5

Gulp encountered an issue - TypeError: When attempting to call the 'match' method, it was found to be undefined

Currently, I'm attempting to utilize Gulp alongside BrowserSync for a website that is being hosted on MAMP and proxied through localhost:8888. Unfortunately, upon running gulp, I encounter the following error: [17:38:48] Starting 'browser-sync& ...

javascriptnpmgulpbrowser-sync

Access SCSS variable values in Angular HTML or TypeScript files

So, I've been looking into whether it's feasible to utilize the SCSS variable value within HTML or TS in Angular. For instance: Let's say I have a variable called $mdBreakpoint: 992px; stored inside the _variable.scss file. In my HTML cod ...

javascriptcssangulartypescriptsass

View / Conceal Unordered List depending on link selected

How can I dynamically show or hide UL elements based on the clicked link? Here is a JS Fiddle example: http://jsfiddle.net/zangief007/rj8g0yh4/1/ Below is the HTML code: <ul class="category-1 group"> <li class="name">JOHN Smithe QC</l ...

javascriptjqueryhtml

What significance does #! hold in the context of ui.router?

I am utilizing the Angular ui.router in navigating throughout my application. Typically, the URL should appear like this: http://localhost:8001/#/start However, in my scenario, it appears like this: http://localhost:8001/#!/start What is the significan ...

angularjsangular-ui-router

It appears that the return value after making an $http call and chaining a .then function is not being returned accurately

My code is calling a function that in turn returns another function to make an $http call. However, I am puzzled by the alerts I see when the code runs. First, I get an alert saying "notok" and then followed by an alert saying "topicsRetrieve2 okay". Sho ...

angularjs

Issue with color display inconsistency in webgrid across various segments

https://i.sstatic.net/UW17M.png My goal is to display section status colors in a webgrid and divide them percentage-wise, but I am facing issues with some of the rows. Here is the cshtml script for the webgrid section status: webGrid.Column(header: "Sec ...

htmlcssasp.net-mvcgridwebgrid