AngularJs 更新引导进度条

AngularJs updating Bootstrap Progress bar

本文关键字：更新 AngularJs      更新时间：2023-09-26

我正在尝试使用angularJS设置柱线的进度

变量使用 ng-model 连接到输入。

javascript 

angular.module('progressTest', []);
angular.module('progressTest')
          .controller('mainController', function ($scope) {
  $scope.percent = 0;
})

html 

<div ng-app="progressTest">
  <div ng-controller="mainController as mainCtrl">
    <div class="progress">
      <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{ mainCtrl.percent }}" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      </div>
    </div>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2" ng-model="mainCtrl.percent">
      <span class="input-group-addon" id="basic-addon2">%</span>
    </div>
    <span>{{ mainCtrl.percent }}</span>
  </div>
</div>

模型正在更新，但对进度条值没有影响。

编辑：忘记添加此代码笔

更新

抱歉，我以为这与控制器有关。但主要问题是aria-valuenow和width彼此不同步。仅仅绑定aria-valueNow是不够的，还需要绑定width样式。下面的代码有效，因为我们使用 ng-style 绑定width 

  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{ mainCtrl.percent }}" aria-valuemin="0" aria-valuemax="100"
  ng-style="{'width':mainCtrl.percent+'%'}">

原始答案将与上述更新一起使用。

使用controller as alias语法时，应使用 this 而不是 $scope 。请尝试以下代码。它会起作用。

angular.module('progressTest', []);
angular.module('progressTest')
          .controller('mainController', function () {
  this.percent = 0;
})
相关文章：