Question

如Bootstrap star-rating shown two times所述，我目前正在努力解决类似的问题。

<div class="row">
    <input id="input-id123" type="number" class="" min=0 max=6 data-stars=6 step=1>
</div>
<script type="text/javascript">
    $("#input-id123").rating();
</script>

我将Bootstrap-star-rating v3.5.4与AngularJS Directive结合使用。

生成的代码看起来像这样：

<div class="row">
    <div class="star-rating rating-md rating-active">
      <div class="clear-rating clear-rating-active" title="Clear">
        <i class="glyphicon glyphicon-minus-sign"></i>
      </div>
      <div class="rating-container rating-gly-star" data-content="">
        <div class="rating-stars" data-content="" style="width: 0%;">
        </div>
        <div  class="star-rating rating-md rating-active">
        <div class="clear-rating clear-rating-active" title="Clear"><i class="glyphicon glyphicon-minus-sign"></i></div>
        <div class="rating-container rating-gly-star" data-content="">
          <div class="rating-stars" data-content="" style="width: 0%;"></div>
            <input id="input-id123" type="number" class="form-control hide" min="0" max="6" data-stars="6" step="1">
          </div>
          <div class="caption">
            <span class="label label-default"> Not Rated</span>
          </div>
        </div>
    </div>
    <div class="caption">
      <span class="label label-default">Not Rated</span
    </div>
  </div>
</div>

class = rating指令不影响外观
没有初始化，它不会改为评级风格
id是唯一的

对于指令，它是一个简单的html模板，如下所示

.directive('Rating', function() {
    return {
        scope: {
            filterBy: '='
        },
        restrict: 'E',
        templateUrl: '/scripts/partials/survey-rating.html',
    };
});

在视图中我使用了这个标记

Answer 1

由于此指令仅用于angular.js，因此在指令中切换到angular-ui bootstrap更容易，更方便

http://angular-ui.github.io/bootstrap/#/rating

在指令中，我使用了uib-rating，这使得控制器的使用变得不必要。

<uib-rating
    ng-model='rate'
    max='6'
    aria-labelledby='default-rating'
    ng-change='checkChange()'></uib-rating>

Bootstrap星级评级显示2次递归

1 个答案: