javascript - angularjs 进度条动态宽度

Question

我有一个图片库，其中包含一张照片、一个竖起大拇指按钮和每个元素的进度条。所有元素都派生自一个 JSON 对象。我想根据点击竖起大拇指按钮的次数动态更改我的进度条。

<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"/>

我的问题是无论按钮被点击多少次，进度条都不会更新。

$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;
    }
}     

有什么想法吗？

Answer 1

替换

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

与:

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

ng-style 指令需要一个对象作为输入。对象键为css属性名，值为css属性值。
由于 ng-style 属性中的代码是一个 javascript 对象 {}，我们只需在值的末尾添加 %。由于我们附加到字符串，它会自动将值转换为字符串。