CODEWITHSUNDEEP
javascriptcssangularjstwitter-bootstrap
superjim
superjim

Reputation: 81

using ng-repeat with bootstrap's progress bar

I'm trying to create this progress bar (https://plnkr.co/edit/LKt0PmMjPjBzY34JTsRR?p=preview) using ng-repeat:

<div class="progress" style="transform: rotate(-90deg); width: 494px">
 <div ng-repeat="o in arr">
  <div class="progress-bar progress-bar-success" role="progressbar" style="width:5px;"></div>
  <div class="progress-bar" role="progressbar" style="width:1px; background:transparent;"></div>
 </div>
</div>

However, it's not working because Bootstrap doesn't accept that extra div I'm using for the ng-repeat. Any ideas on how to solve this?

Here's a live Plunker: http://plnkr.co/edit/q9QW2Pn08uYrHllHb9oa?p=preview

Upvotes: 1

Views: 643

Answers (1)

dfsq
dfsq

Reputation: 193261

Just repeat green element itself:

<div ng-app="app">
  <div ng-controller="ctrl">
    <div class="progress" style="transform: rotate(-90deg); width: 494px">
      <green ng-repeat="o in arr"></green>
    </div>
  </div>
</div>

Demo: http://plnkr.co/edit/f1Tqfu5O9GsJiy4Nt7tk?p=preview

Upvotes: 3

Related Questions