angular 未填星的星级评定指令

Question

如何修改 angular 星级评定指令以在加载时显示无星标（默认）？以下是相同的指令：

responseController.directive('starRating', function(){

    return {
      restrict: 'EA',
      template:
        '<ul class="star-rating" ng-class="{readonly: readonly}">' +
        '  <li ng-repeat="star in stars" class="star" ng-class="{filled: star.filled}" ng-click="toggle($index)">' +
        '    <i class="fa fa-star"></i>' +
        '  </li>' +
        '</ul>',
      scope: {
        ratingValue: '=ngModel',
        max: '=?',
        onRatingSelect: '&?',
        readonly: '=?'
      },
      link: function(scope, element, attributes) {
        if (scope.max == undefined) {
          scope.max = 5;
        }
        function updateStars() {
          scope.stars = [];
          for (var i = 0; i < scope.max; i++) {
            scope.stars.push({
              filled: i < scope.ratingValue
            });
          }
        };
        scope.toggle = function(index) {
          if (scope.readonly == undefined || scope.readonly === false) {
            scope.ratingValue = index + 1;
          }
        };
        scope.$watch('ratingValue', function(oldValue, newValue) {
          if (newValue) {
            updateStars();
          }
        });
      }
    };
});

Answer 1

您可以在 $scope.watch(...) 之前添加 updateStars();。它会渲染未填充的星星。之后如果ratingValue的值不是undefined，watcher会更新stars。

Answer 2

 app.directive('starRating', function () {
        return {
          //This template is used to display the star UX in repeated form.
          template: '<ul class="starRating">' + '<li ng-repeat="star in stars" ng-class="star" ng-click="toggleFunck($index)">' + '\u2605' + '</li>' + '</ul>',
          scope: {
            ratingValue: '= ',
            max: '=',
            onStarRating: '&'
          },

          link: function (scope, elem, attrs) {
            //This method is used to update the rating run time.
            var updateRating = function () {
              //This is global level collection.
              scope.stars = [];
              //Loop called with the help of data-max directive input and push the stars count.
              for (var i = 0; i < scope.max; i++) {
                scope.stars.push({
                  filled: i < scope.ratingValue
                });
              }
            };
            //This is used to toggle the rating stars.
            scope.toggleFunck = function (index) {
              alert(index);
              //This is used to count the default start rating and sum the number of input index.
              scope.ratingValue = index + 1;
              scope.onStarRating({
                rating: index + 1
              });
            };
            updateRating();
            //This is used to watch activity on scope, if any changes on star rating is call automatically and update the stars.
            scope.$watch('ratingValue',
              function (newV, oldV) {
                if (newV) {
                  updateRating();
                }
              }
            );
          }
        };
      }
    );

angular 未填星的星级评定指令

angular star rating directive with no star filled

rating

angularjs