angularJS中的动态引导进度条答案

【问题标题】：dynamic bootstrap progress bar in angularJSangularJS中的动态引导进度条
【发布时间】：2017-06-23 00:02:05
【问题描述】：

我正在创建一个网络应用程序，我想在其中显示进度条取决于我的 sql 服务器中的数据，

例如，我在我的进度条中获取我的数据，如(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，所以我的数据将进入我的控制器，

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

【问题讨论】：

标签： javascript css angularjs twitter-bootstrap

【解决方案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';

【讨论】：

【解决方案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.
//....

【讨论】：