Angular controller - Unable to display value

Question

This should be a very easy question for most of you guys, but i'm a beginner with angular..

So, i'm trying to display a progressbar (just as a test for the moment) but i'm unable to update the value.

An example can be found here: http://jsbin.com/cuvedoteye/edit?html,output

Here's the controller code:

.controller('test', ['$scope', function ($scope) {
        $scope.progress = function () {
            var display = 100 * (Date.now() % 60) / 60;
            return display;
        }
    }])

and here's the html:

<h3>ProgressBar</h3>
<progress ng-controller="test" value="progress()"></progress>

why it's not working? thanks for any help

EDIT

Updated code with ng-value instead of value: http://jsbin.com/jujewiboya/edit?html,output

I can see it moving in here, but in on my example i can't, it's just fully blue

where did <progress> come from? have you defined a directive somewhere? — Subash
– Subash, Commented Jan 26, 2016 at 11:10
progress is a html 5 tag: w3schools.com/tags/tag_progress.asp — Nick
– Nick, Commented Jan 26, 2016 at 11:13
oh ok. i wasn't aware of that tag. Let me try to see whats wrong with your code then. — Subash
– Subash, Commented Jan 26, 2016 at 11:15
how is the progress bar meant to work? change value to ng-value. — Subash
– Subash, Commented Jan 26, 2016 at 11:20
function progress runs only onсe - when controller created. Try to use $interval. Here's demo with directive and $interval. — Kovalenko Ivan
– Kovalenko Ivan, Commented Jan 26, 2016 at 11:29

Kovalenko Ivan · Accepted Answer · 2016-01-26 11:34:52Z

2

Function progress runs only onсe - when controller created.

Try to use $interval. Here's demo with directive and $interval.

answered Jan 26, 2016 at 11:34

Kovalenko Ivan

1725 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Subash · Accepted Answer · 2016-01-26 11:21:28Z

2

You got to change value to ng-value.

<h3>ProgressBar</h3>
<progress ng-controller="test" ng-value="progress()"></progress>

Here is a js-fiddle

answered Jan 26, 2016 at 11:21

Subash

7,3068 gold badges47 silver badges73 bronze badges

4 Comments

Nick Over a year ago

if i change it to ng-value, i'm not able to see it moving. Why?

Subash Over a year ago

Ok. What you are trying to do is not that easily achievable. I would rather use css animation for simulating loading. Is that a option?

Nick Over a year ago

yes, i mean, i'm just doing some proof of concept before starting my real project, i thought it would have been this easy, but i can evaluate different options without any problem

Nick Over a year ago

the strange thing tho, is that in the second jsbin link in my question, it work as i want, but it does not in my project for some reason that i cannot understand

Olexandr Poplavskyi · Accepted Answer · 2016-01-26 11:12:38Z

1

Try ng-value attribute instead of value in the tag

answered Jan 26, 2016 at 11:12

Olexandr Poplavskyi

3631 silver badge11 bronze badges

9 Comments

Nick Over a year ago

with ng-value i can see something in the value tag, but i actually wanted to see the bar moving...all i have is a full progressbar. Is it something that i have to change in the controller function?

Olexandr Poplavskyi Over a year ago

could you please to try define max attr too?

Nick Over a year ago

actually, if i add ng-value in the jsbin link above i can see it moving, but on my code it's not moving for some reason..

Olexandr Poplavskyi Over a year ago

Also your progress() function call will reset progress on each call.

Olexandr Poplavskyi Over a year ago

I think it shouldn`t move at all when value attr is set. If you wish to see moveing, you need increment this value

|

Collectives™ on Stack Overflow

Angular controller - Unable to display value

3 Answers 3

Comments

4 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related