使用 angularjs 渲染星级评分系统 [英] Rendering a Star Rating System using angularjs
本文介绍了使用 angularjs 渲染星级评分系统的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的应用程序在这个
html
<div ng-controller="StarCtrl"><span ng-repeat="rating in ratings">{{rating.current}}{{rating.max}}<div star-rating rating-value="rating.current" max="rating.max" ></div></span>脚本
var starApp = angular.module('starApp', []);starApp.controller('StarCtrl', ['$scope', function ($scope) {$scope.ratings = [{当前:5，最大:10}, {当前:3，最大:5}];}]);starApp.directive('starRating', function () {返回 {限制:'A'，模板:'<ul class="rating">'+'<li ng-repeat="star in star" ng-class="star">'+'\u2605' +'</li>'+'</ul>',范围: {评级值:'='，最大值:'='},链接:函数(范围，元素，属性){scope.stars = [];for (var i = 0; i <小时>
如果你想动态地做星级评价，试试这个
动态星级
HTML
<div ng-controller="StarCtrl"><span ng-repeat="rating in ratings">{{rating.current}}{{rating.max}}<div star-rating rating-value="rating.current" max="rating.max" on-rating-selected="getSelectedRating(rating)"></div></span>脚本
var starApp = angular.module('starApp', []);starApp.controller('StarCtrl', ['$scope', function ($scope) {$scope.rating = 0;$scope.ratings = [{当前:5，最大:10}, {当前:3，最大:5}];$scope.getSelectedRating = 函数(评级){控制台日志(评级)；}}]);starApp.directive('starRating', function () {返回 {限制:'A'，模板:'<ul class="rating">'+'<li ng-repeat="star in star" ng-class="star" ng-click="toggle($index)">'+'\u2605' +'</li>'+'</ul>',范围: {评级值:'='，最大值:'='，onRatingSelected: '&'},链接:函数(范围，元素，属性){var updateStars = function () {scope.stars = [];for (var i = 0; i 有一个很棒的教程这里 有关Angular Star Rating
的更多说明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.
Is it a good idea to create arrays from $scope.current and
$scope.max - $scope.current and pass them and run ng-repeat over them, or there is a more optimised solution than this.
Iteration ng-repeat only X times in AngularJs
解决方案
Star Rating can be done either statically (read-only) or dynamically
If you want just simply to display Rating as star then try the below one
Static Star Rating
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
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
这篇关于使用 angularjs 渲染星级评分系统的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
