Javascript angularjs进度条动态宽度

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

有什么想法吗

更换

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

与：

ng style

指令要求输入一个对象。对象键是css属性名称，值是css属性的值。

---

由于

ng style

属性中的代码是一个javascript对象

{}

，我们只需在值的末尾添加

%

。由于我们将附加到字符串，它将自动将值转换为字符串。

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

{{character.likes}}

---

因为很难从后端检索json属性（与jquery不同），并且如果我们在angular中简单地使用“（）”绑定它，progressbar宽度将是静态的。现在一切都很顺利。

欢迎来到stackoverflow。与其提供代码图像的链接，不如将代码片段剪切粘贴到问题中。我现在已经内联了您的图像，但正如Andrew所说，请发布代码，而不是代码图像。这有助于人们帮助您，因为他们可以轻松地复制代码进行尝试，并帮助搜索引擎正确地索引问题。您好，欢迎光临。虽然我目前无法测试任何代码，但请看一下这个问题，并为您试一试。我注意到width属性应该写为“width”。哦，是的，上面的评论是真实的。让我们知道进展如何！您是否初始化了

字符

和

字符。喜欢

？出于测试目的，将

{{character.likes}}

添加到您的HTML中，查看它是否增加。嗨，伙计们，谢谢你们的建议。是的，我已经在gallery div中初始化了“character in characters”，并且增量函数运行良好。问题是当“likes”数字增加时，进度条不会改变。

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

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