Rendering a Star Rating System using angularjs

后端未结

关注

 7  1145

My app is in this Fiddle I need to render a star rating system dynamically from a http service, where the current stars and maximum stars can vary with each case.

Static Star Rating

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>

script

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
                });
            }
        }
    }
});

If you want to do Star Rating dynamically try this out

Dynamic Star Rating

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>

script

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();
                }
            });
        }
    }
});

There is a wonderful tutorial here for more explanation about Angular Star Rating

0 讨论(0)

你的背包

2020-12-08 18:04

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

0 讨论(0)

情深已故

2020-12-08 18:05

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

-
##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);
}

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

0 讨论(0)

忘掉有多难

2020-12-08 18:09
You can even try angular-ui. Here is the link.

Just need to add this tag.
```
<rating ng-model="rate" max="max" 
    readonly="isReadonly" 
    on-hover="hoveringOver(value)" 
    on-leave="overStar = null">
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

北恋

2020-12-08 18:09

You could hold an array of objects like so:

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. 

}]);

Then in your view you could use ng-repeat like so:

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

0 讨论(0)

不要未来只要你来

2020-12-08 18:14

My minimalistic approach:

The view

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

Note: if you want to use the onClick event instead onMouseOver event then replace ng-mouseover with ng-click in the HTML above.

The controller

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

Optionally some CSS enhancements

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

Not convinced? Try this JSFiddle: https://jsfiddle.net/h4zo730f/2/

0 讨论(0)

1 2 下一页