AngularJS实现星星等级评分功能
时间：2021-09-27 09:43:28|栏目：AngularJS|点击： 次
星期六加班，教育后台也要有星级评分等级的需求，醉了……基本知道些怎么做，网上也随便找了找，没什么合意的，毕竟需求不同，也不能完全一样不是。学习之，改之?r(?s??t)?q
Directive
angular.module('XXX').directive('stars', stars);
function stars() {
var directive = {
restrict: 'AE',
template: '<ul class="rating" ng-mouseleave="leave()">' +
'<li ng-repeat="star in stars" ng-class="star" ng-click="click($index + 1)" ng-mouseover="over($index + 1)">' +
'<i class="glyphicon glyphicon-star stars"></i>' +
'</li>' +
'</ul>',
scope: {
ratingValue: '=',
hoverValue: '=',
max: '=',
onHover: '=',
onLeave: '='
},
controller: startsController,
link: function(scope, elem, attrs) {
elem.css("display", "block");
elem.css("text-align", "center");
var updateStars = function() {
scope.stars = [];
for (var i = 0; i < scope.max; i++) {
scope.stars.push({
filled: i < scope.ratingValue
});
}
};
updateStars();
var updateStarsHover = function() {
scope.stars = [];
for (var i = 0; i < scope.max; i++) {
scope.stars.push({
filled: i < scope.hoverValue
});
}
};
updateStarsHover();
scope.$watch('ratingValue', function(oldVal, newVal) {
if (newVal) {
updateStars();
}
});
scope.$watch('hoverValue', function(oldVal, newVal) {
if (newVal) {
updateStarsHover();
}
});
}
};
return directive;
/** @ngInject */
function startsController($scope) {
// var vm = this;
$scope.click = function(val) {
$scope.ratingValue = val;
};
$scope.over = function(val) {
$scope.hoverValue = val;
};
$scope.leave = function() {
$scope.onLeave();
}
}
}
CSS
.rating {
color: #a9a9a9;
margin: 0;
padding: 0;
text-align: center;
}
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: #f00;
}
.rating .stars{
font-size: 20px;
margin-right: 5px;
}
Controller
//星星等级评分
$scope.max = 6;
$scope.ratingVal = 6;
$scope.hoverVal = 6;//我这需求是默认六个星全满(淡腾,反正也招不出神龙.因为还差一个.)一般的话，ratingVal和hoverVal都写0就可以了。
$scope.onHover = function(val) {
$scope.hoverVal = val;
};
$scope.onLeave = function() {
$scope.hoverVal = $scope.ratingVal;
}
$scope.onChange = function(val) {
$scope.ratingVal = val;
}
HTML
<stars rating-value="ratingVal" hover-value="hoverVal" max="max" on-hover="onHover" on-leave="onLeave"></stars>
ratingVal:{{ratingVal}};<br/>
hoverVal:{{hoverVal}}
说几句， 星星那东西，可以直接输入法敲出来，也可以用unicode搞出来，字体文件什么的都行，你要硬用图片的话……把ngClass换成ngSrc也可以试试，代码改改也行，精灵图改改background-position也凑合过，?r(?s??t)?q 想了一下，比较累，祝你成功。
如果是那种商城网站只是要看评价等级的话，复用代码也可以，加个readonly属性。
directive：
scope: {
readonly: '@'
}
function startsController($scope) {
// var vm = this;
$scope.click = function(val) {
if ($scope.readonly) {
return;
}
$scope.ratingValue = val;
};
$scope.over = function(val) {
if ($scope.readonly) {
return;
}
$scope.hoverValue = val;
};
}
controller:
$scope.readonly = false;
html:
readonly={{readonly}}.
写到这，突然意识到今后一定会改需求，加功能(已然习惯)。我还是默默地加上readonly吧……
指令这玩意，深了很绕，我也弄不熟，每次写还得翻翻以前写的代码，毕竟渣渣。每次不要复用的代码，我都懒得用指令，毕竟菜鸟。
上一篇：Angular2中Bootstrap界面库ng-bootstrap详解
栏 目：AngularJS
本文标题：AngularJS实现星星等级评分功能
本文地址：http://www.codeinn.net/misctech/177586.html
