当模型改变时，进度条的最大值不会改变

Maximum value of progressbar does not change when the model does

本文关键字：改变 最大值 模型      更新时间：2023-09-26

我使用Angular UI Bootstrap和以下代码来显示进度条：

<tr ng-repeat="hero in gamedata.heroes">
    <td>{{hero.name}}</td>
    <td><progressbar max="hero.nextLevel" value="hero.xp">{{hero.xp}}/{{hero.nextLevel}}</progressbar></td>
</tr>

一开始这很好，但当我更改模型中的hero.nextLevel时，它就中断了。进度条中的文本更新良好，但max属性似乎没有更改。进度条仍然以最初设置的值完全填充，然后继续增长（这是不可见的，但如果检查它，宽度属性仍在更改），直到它达到hero.nextLevel的新值。

例如，hero.nextLevel被设置为10。一旦达到该值，就会将其设置为20，XP则设置为0。当XP达到10时，进度条将再次填充，然后继续增长，直到达到20，在那里它将再次重置。

为什么模型发生更改时，最大属性没有更改？我怎样才能让它与模型一起更新？

progressbar指令仅关注value和type属性的变化，如相应代码所示。文档在属性名称后面有一个小眼睛图标，这可能是为了表示这一事实。

因此，除非您自己扩展该指令，否则无法获得max值以随模型更新。

相关文章：