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>

該模型被更新，但沒有對進度條價值沒有影響。

編輯：忘了補充這個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更新引導進度條

回答

相關問題