Javascript angularJS中的动态引导进度条

我正在创建一个web应用程序，其中我希望根据sql server中的数据显示进度条

例如，我在我的进度条中获取类似

（40）

的数据，我的进度条的宽度应该是

40%

，如果我的数据是

70

，我的进度条的宽度应该是

70%

这是我的静态进度条

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="70"
        aria-valuemin="0" aria-valuemax="100" style="width:70%">
        <span class="sr-only">70% Complete</span>
    </div>
</div>

70%完成

我用的是angularJS所以我的数据进入我的控制器

---

要使进度条动态，我需要做什么假定aria valuenow属性本身是动态的，您可以使用以下方法：

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="{{progressValue}}"
        aria-valuemin="0" aria-valuemax="100" ng-style="{'width':progressValue}">
        <span class="sr-only">70% Complete</span>
    </div>
</div>

你可以试试这个

<div class="container">
<h2>Basic Progress Bar</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="100" style="width:{{value}}%">
  <span class="sr-only">{{value}}% Complete</span>
</div>
</div>
</div>

<div class="container">
<h2>Basic Progress Bar</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="100" style="width:{{value}}%">
  <span class="sr-only">{{value}}% Complete</span>
</div>
</div>
</div>

$scope.value= 'sql data variable';