AngularJs updating Bootstrap Progress bar

Question

I'm trying to set the progress of the bar using angularJS

The variable is connected to an input using 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>

The model is updating but there is no effect on the progress bar value.

edit: forgot to add this codepen

can you make fiddle or codepen?

Divyesh Savaliya
– Divyesh Savaliya

2016-03-04 11:40:20 +00:00
Commented Mar 4, 2016 at 11:40 — Divyesh Savaliya
– Divyesh Savaliya, Commented Mar 4, 2016 at 11:40
I just added the code pen

Ishan Khare
– Ishan Khare

2016-03-04 14:02:10 +00:00
Commented Mar 4, 2016 at 14:02 — Ishan Khare
– Ishan Khare, Commented Mar 4, 2016 at 14:02

Naga Sandeep · Accepted Answer · 2016-03-04 14:23:09Z

2

Update

Sorry, I thought it was to do with the controller. But the main problem was the aria-valuenow and width were not in sync with each other. Its not sufficient to bind aria-valueNow, but it is also necessary to bind width style. The below code works because we are binding the width using 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+'%'}">

Original answer to be used along with above update.

When you are using controller as alias syntax, you should use this instead of $scope. Try the below code. It will work.

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

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

edited Mar 4, 2016 at 14:23

answered Mar 4, 2016 at 11:45

Naga Sandeep

1,4312 gold badges13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJs updating Bootstrap Progress bar

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related