javascript - angularJS 中的动态 Bootstrap 进度条

Question

我正在创建一个网络应用程序，我想在其中显示进度条取决于来 self 的 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>

我正在使用 angularJS，所以我的数据来 self 的 Controller ，

我需要做些什么才能让我的进度条动态化

Answer 1

你可以试试这个

<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>

并在脚本中将 Controller 和值从 sql server 写入 value 变量 $scope.value= variable

$scope.value= 'sql data variable';