CODEWITHSUNDEEP
javascriptcssangularjsprogress-bar
Allen
Allen

Reputation: 29

angularjs progress bar dynamic width

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?

Upvotes: 1

Views: 2139

Answers (2)

Allen
Allen

Reputation: 29

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.

Upvotes: 0

sjokkogutten
sjokkogutten

Reputation: 2095

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.

Upvotes: 1

Related Questions