AngularJs更新引导进度条

2016-03-04 118 views 2 likes

变量被连接到使用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>

该模型被更新，但没有对进度条价值没有影响。

编辑：忘了补充这个codepen

来源

2016-03-04 Ishan Khare

你可以让小提琴或codepen？ –

我刚加了代码笔 –

回答

更新

对不起，我还以为是与控制器做。但主要问题是aria-valuenow和width没有相互同步。它的不够来绑定aria-valueNow，但它也必要绑定width样式。下面的代码工作，因为我们使用的是要与上述更新一起使用ng-style

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

原来的答复绑定width。

当您使用controller as alias语法时，应该使用this而不是$scope。尝试下面的代码。它会工作。

angular.module('progressTest', []); 

angular.module('progressTest') 
      .controller('mainController', function() { 
    this.percent = 0; 
})

来源

2016-03-04 11:45:14

我试过用'this'已经 –

更新了答案。 –

AngularJs更新引导进度条

回答

相关问题