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对象{}，因此我们只需在值的末尾添加%即可。由于我们附加到字符串，它会自动将值转换为字符串。

Answer 2

谢谢你们。我已经明白了。我没有使用函数，而是直接绑定视图和模型。

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

因为很难从后端检索json属性（与jquery不同），如果我们只是在角度中使用'（）'绑定它，则进度条宽度将是静态的。现在一切都很好。

angularjs进度条动态宽度

2 个答案: