Question

我的应用就在这个Fiddle 我需要动态地从一个http服务渲染一个星级评分系统，其中当前的星星和最大的星星可以根据每种情况而变化。

从$scope.current创建数组是一个好主意 $scope.max - $scope.current并传递它们并对它们运行ng-repeat，或者有一个比这更优化的解决方案。 Iteration ng-repeat only X times in AngularJs

Answer 1

星级评分可以静态（只读）或动态

完成

enter image description here

如果您只想将评分显示为星级，请尝试下面的

静态星级评分

Working Example

<强> HTML

<body ng-app="starApp">
    <div ng-controller="StarCtrl"> <span ng-repeat="rating in ratings">{{rating.current}} out of
            {{rating.max}}
        <div star-rating rating-value="rating.current" max="rating.max" ></div>
        </span>

    </div>
</body>

<强>脚本

var starApp = angular.module('starApp', []);

starApp.controller('StarCtrl', ['$scope', function ($scope) {
    $scope.ratings = [{
        current: 5,
        max: 10
    }, {
        current: 3,
        max: 5
    }];
}]);

starApp.directive('starRating', function () {
    return {
        restrict: 'A',
        template: '<ul class="rating">' +
            '<li ng-repeat="star in stars" ng-class="star">' +
            '\u2605' +
            '</li>' +
            '</ul>',
        scope: {
            ratingValue: '=',
            max: '='
        },
        link: function (scope, elem, attrs) {
            scope.stars = [];
            for (var i = 0; i < scope.max; i++) {
                scope.stars.push({
                    filled: i < scope.ratingValue
                });
            }
        }
    }
});

如果您想动态进行星级评分，请尝试使用

动态星级评分

Working Demo

<强> HTML

<body ng-app="starApp">
    <div ng-controller="StarCtrl"> <span ng-repeat="rating in ratings">{{rating.current}} out of
            {{rating.max}}
        <div star-rating rating-value="rating.current" max="rating.max" on-rating-selected="getSelectedRating(rating)"></div>
        </span>
    </div>
</body>

<强>脚本

var starApp = angular.module('starApp', []);

starApp.controller('StarCtrl', ['$scope', function ($scope) {
    $scope.rating = 0;
    $scope.ratings = [{
        current: 5,
        max: 10
    }, {
        current: 3,
        max: 5
    }];

    $scope.getSelectedRating = function (rating) {
        console.log(rating);
    }
}]);

starApp.directive('starRating', function () {
    return {
        restrict: 'A',
        template: '<ul class="rating">' +
            '<li ng-repeat="star in stars" ng-class="star" ng-click="toggle($index)">' +
            '\u2605' +
            '</li>' +
            '</ul>',
        scope: {
            ratingValue: '=',
            max: '=',
            onRatingSelected: '&'
        },
        link: function (scope, elem, attrs) {

            var updateStars = function () {
                scope.stars = [];
                for (var i = 0; i < scope.max; i++) {
                    scope.stars.push({
                        filled: i < scope.ratingValue
                    });
                }
            };

            scope.toggle = function (index) {
                scope.ratingValue = index + 1;
                scope.onRatingSelected({
                    rating: index + 1
                });
            };

            scope.$watch('ratingValue', function (oldVal, newVal) {
                if (newVal) {
                    updateStars();
                }
            });
        }
    }
});

有一个很棒的教程 here 有关 Angular Star Rating

的更多解释

Answer 2

你甚至可以尝试使用angular-ui。这是 link 。

只需要添加此标记。

<rating ng-model="rate" max="max" 
    readonly="isReadonly" 
    on-hover="hoveringOver(value)" 
    on-leave="overStar = null">

Answer 3

您可以保存一组对象：

var starApp = angular.module('starApp',[]);

starApp.controller ('StarCtrl', ['$scope', function ($scope) {
    $scope.ratings = [];
    var rating = {
         current : 5, 
         max : 10
    }
    $scope.ratings.push(rating);  // instead you would push what your http service returns into thearray. 

}]);

然后在你的视图中你可以像这样使用ng-repeat：

<body ng-app="starApp">
    <div ng-controller="StarCtrl">
        <span ng-repeat="rating in ratings">{{rating.current}} out of {{rating.max}}</span>
    </div>
</body>

Answer 4

 //Controller
        var starApp = angular.module('starApp', []);
        starApp.controller('StarCtrl', ['$scope', function ($scope) {
            $scope.maxRating = 10;
            $scope.ratedBy = 0;
            $scope.rateBy = function (star) {
                $scope.ratedBy = star;
            }
        }]);

 .rating {
            color: #a9a9a9;
            margin: 0;
            padding: 0;
        }

        ul.rating {
            display: inline-block;
        }

        .rating li {
            list-style-type: none;
            display: inline-block;
            padding: 1px;
            text-align: center;
            font-weight: bold;
            cursor: pointer;
        }

        .rating .filled {
            color: blue;
        }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="starApp">    
    <div ng-controller="StarCtrl">
        <ul class="rating">
            <li ng-repeat="n in [].constructor(maxRating) track by $index">
                <span ng-click="rateBy($index+1)" ng-show="ratedBy > $index" class="filled">&#9733;</span>
                <span ng-click="rateBy($index+1)" ng-show="ratedBy <= $index">&#9733;</span>
            </li>
        </ul>
    </div>
    </body>

Answer 5

我的简约方法：

视图

<head>
  <!-- alternatively you may use another CSS library (like FontAwesome) to represent the star glyphs -->
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.min.js"></script>
  <!-- insert the JavaScript controller and the CSS enhancements here -->
</head>

<body>
  <div ng-app="StarRatings">
    <div ng-controller="myController as ctrl">
      <div ng-repeat="n in ctrl.getStarArray()" ng-class="ctrl.getClass(n)" ng-mouseover="ctrl.setClass($event,n)">  </div>
      <p>
        You have chosen {{ctrl.selStars}} stars
      </p>
    </div>
  </div>
</body>

注意：如果您想使用onClick事件代替onMouseOver事件，请在上面的HTML中将ng-mouseover替换为ng-click。< / p>

控制器

<script>
(function() {
  var app = angular.module('StarRatings', []);

  app.controller('myController', function() {
    this.selStars = 0; // initial stars count
    this.maxStars = 5; // maximum number of stars

    // a helper function used within view
    this.getStarArray = function() {
      var result = [];
      for (var i = 1; i <= this.maxStars; i++)
        result.push(i);
      return result;
    };

    // the class used to paint a star (filled/empty) by its position
    this.getClass = function(index) {
      return 'glyphicon glyphicon-star' + (this.selStars >= index ? '' : '-empty');
    };

    // set the DOM element class (filled/empty star)
    this.setClass = function(sender, index) {
      this.selStars = index;
      sender.currentTarget.setAttribute('class', this.getClass(index));
    };

  });
})();
</script>

可选择一些CSS增强功能

<style>
.glyphicon {
  color: gold;
  cursor: pointer;
  font-size: 1.25em;
}
</style>

不相信？试试这个JSFiddle：https://jsfiddle.net/h4zo730f/2/

Answer 6

＆＃13;

let app = angular.module ('myapp',[])

＆＃13;

-
##star Rating Styles 
----------------------*/

.stars {
  padding-top: 10px;
  width: 100%;
  display: inline-block;
}
span.glyphicon {
  padding: 5px;
}
.glyphicon-star-empty {
  color: #9d9d9d;
}
.glyphicon-star-empty,
.glyphicon-star {
  font-size: 18px;
}
.glyphicon-star {
  color: #FD4;
  transition: all .25s;
}
.glyphicon-star:hover {
  transform: rotate(-15deg) scale(1.3);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div ng-app= "myapp"  >
<div class="stars">
  <div id="stars" class="star">
    <span ng-repeat="x in [0,1,2,3,4,5]" ng-if="($index < 4)" class="glyphicon glyphicon-star">  </span>
    <span ng-repeat="x in [0,1,2,3,4,5]" ng-if="($index >= 4 && $index < 5) " class="glyphicon glyphicon-star-empty"></span>
  </div>
</div>
  </div>

＆＃13;

Answer 7

hmc.starRating.js

angular.module('starRatings',[]).directive('starRating', function () {
        return {
            restrict: 'A',
            template: '<ul class="rating">' +
                '<li ng-repeat="star in stars" ng-class="star">' +
                '\u2605' +
                '</li>' +
                '</ul>',
            scope: {
                ratingValue: '=',
                max: '='
            },
            link: function (scope, elem, attrs) {
                console.log(scope.ratingValue);
                function buildStars(){
                  scope.stars = [];
                  for (var i = 0; i < scope.max; i++) {
                      scope.stars.push({
                          filled: i < scope.ratingValue
                      });
                  }
                }
                buildStars();
                scope.$watch('ratingValue',function(oldVal, newVal){
                  if(oldVal !== newVal){
                    buildStars();
                  }
                })
            }
        }
    });



<script src="hmc.starRating.js"></script>


**app.js**
var app = angular.module('app', ['ui.bootstrap', 'starRatings']);


**indix.html**
<div star-rating rating-value="7" max="8" ></div>


    .rating {
        color: #a9a9a9;
        margin: 0 !important;
        padding: 0 !important;
    }
    ul.rating {
        display: inline-block !important;
    }
    .rating li {
        list-style-type: none !important;
        display: inline-block !important;
        padding: 1px !important;
        text-align: center !important;
        font-weight: bold !important;
        cursor: pointer !important;
        width: 13px !important;
        color: #ccc !important;
        font-size: 16px !important;
    }
    .rating .filled {
      color: #ff6131 !important;
      width: 13px !important;
    }

使用angularjs渲染星级评分系统

7 个答案:

静态星级评分

动态星级评分