AngularJs更新Bootstrap进度条

Question

我正在尝试使用 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>

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

edit: forgot to add this codepen

Answer 1

更新

抱歉，我以为是控制器的问题。但主要问题是 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; })

AngularJs更新Bootstrap进度条

AngularJs updating Bootstrap Progress bar

javascript

twitter-bootstrap

angularjs

progress-bar