1

I have an image gallery which contains a photo, a thumbs-up button and a progress bar for each item. All items are derived from only one JSON object. I want to dynamically change my progress bar according to how many times the thumbs-up button is clicked. 

<div class="container col-lg-12">
    <h2>Vote for your favorite character</h2>
    <div class="progress" >
        <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" ng-style="{width:{{width(character.likes)}}+'%'}">
        </div>
    </div>
</div>
<input style="width:10%;height:10%" type="image" value="like" ng-click="incrementLikes(character)" src="images/thumbs-up.png"/>
<input style="width:10%;height:10%" type="image" value="dislike" ng-click="decrementLikes(character)" src="images/thumbs-down.png"/>

My issue is that the progress bar will not update no matter how many times the button is clicked.

$scope.incrementLikes = function(character) {
    character.likes++;
}

$scope.decrementLikes = function (character) {
    character.likes--;
}

$scope.width = function(likes) {
    if (likes >= 0) {
        return likes+10;
    }else{
        return 0;
    }
}

Any ideas?

Allen
  • 29
  • 7
  • Welcome to stackoverflow. Rather than providing links to images of the code, you should cut-and-paste the code snippets into the question. – Andrew Shepherd Dec 06 '15 at 22:55
  • 1
    I've inlined your images for now, but as Andrew says, please post code, not images of code. This helps people to help you, because they can easily copy the code to try it out, and it helps search engines index the question properly. – Dan Lowe Dec 06 '15 at 22:59
  • Hi and welcome. While I'm unable to test any code at the moment, please have a look at this question - http://stackoverflow.com/questions/20287241/how-to-set-div-width-using-ng-style and try it for you. I noticed the width property should be probably written as 'width'. And oh yes, the comments above are true. Let us know how it goes! – lmenus Dec 06 '15 at 23:09
  • 1
    Did you initialize `character` and `character.likes`? For testing purposes, add `{{character.likes}}` to your HTML to see if it increments or not. – georgeawg Dec 06 '15 at 23:45
  • Hi guys, thanks for your great suggestions. Yes, I've initialized "character in characters" in the gallery div, and the increment function works well. The problem is that the progress bar won't change when the "likes" number gets incremented. – Allen Dec 07 '15 at 03:16

2 Answers2

1

Replace

ng-style="{width:{{width(character.likes)}}+'%'}"

with:

ng-style="{width : ( width(character.likes) + '%' ) }"

The ng-style directive requires an object for input. The object key is the css attribute name and the value is the value of the css attribute.
Since the code within the ng-style attribute is a javascript object {}, we ca simply add % at the end of the value. Since we are appending to string it will automatically convert the value to a string.

sjokkogutten
  • 2,005
  • 2
  • 21
  • 24
0

Thanks guys. I've figured it out. Instead of using a function, I'm binding the view and model directly.

<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" ng-style="{width:(character.likes)+'%'}">{{character.likes}}</div>

Since it's hard to retrieve the json property from backend(unlike jquery), and the progressbar width will be static if we simply bind it using '()' in angular. Now everything works sweet.

Allen
  • 29
  • 7