使用ng-repeat和bootstrap的进度条

时间:2016-03-10 13:17:59

标签: javascript css angularjs twitter-bootstrap

我尝试使用ng-repeat创建此进度条(https://plnkr.co/edit/LKt0PmMjPjBzY34JTsRR?p=preview):

<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>

但是,它无法正常工作,因为Bootstrap不接受div我用于ng-repeat的额外public interface MovieReviewHandler { void handle(MovieReview revies); } 。关于如何解决这个问题的任何想法?

这是一个真实的Plunker:http://plnkr.co/edit/q9QW2Pn08uYrHllHb9oa?p=preview

1 个答案:

答案 0 :(得分:3)

只需重复green元素本身:

<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>

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