Question

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

例如，我在进度条的进度条宽度中获取(40)的数据应为40%，如果我的数据为70，则我的进度条的宽度应为{ {1}}

这是我的静态进度条

70%

我正在使用angularJS，所以我的数据会出现在我的控制器中，

我需要做些什么来使我的进度条动态

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>

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

$scope.value= 'sql data variable';

Answer 2

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

在你的AngularJS代码中：

..... function(data) {
 $scope.progressValue = data; // or something else depending upon your app logic.
//....

angularJS中的动态bootstrap进度条

2 个答案: