angularjs进度条动态宽度答案

【问题标题】：angularjs progress bar dynamic widthangularjs进度条动态宽度
【发布时间】：2016-03-11 11:35:24
【问题描述】：

我有一个图片库，其中包含一张照片、一个竖起大拇指按钮和每个项目的进度条。所有项目都仅源自一个 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;
    }
}

有什么想法吗？

【问题讨论】：

欢迎来到stackoverflow。与其提供代码图像的链接，不如将代码 sn-ps 剪切并粘贴到问题中。
我现在已经内联了您的图片，但正如 Andrew 所说，请发布代码，而不是代码图片。这有助于人们为您提供帮助，因为他们可以轻松地复制代码进行尝试，并且有助于搜索引擎正确索引问题。
您好，欢迎您。虽然我目前无法测试任何代码，但请查看这个问题 - stackoverflow.com/questions/20287241/… 并为您尝试。我注意到宽度属性可能应该写为“宽度”。哦，是的，上面的 cmets 是真的。告诉我们进展如何！
你初始化character和character.likes了吗？出于测试目的，将{{character.likes}} 添加到您的 HTML 以查看它是否增加。
大家好，感谢您的宝贵建议。是的，我已经在图库 div 中初始化了“字符中的字符”，并且增量函数运行良好。问题是当“喜欢”数增加时，进度条不会改变。

标签： javascript css angularjs progress-bar

【解决方案1】：

替换

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

与：

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

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

【讨论】：

【解决方案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 不同），如果我们简单地使用 '()' 在 angular 中绑定它，进度条宽度将是静态的。现在一切都很顺利。

【讨论】：