AngularJS实现星星等级评分功能
星期六加班，教育后台也要有星级评分等级的需求，醉了……基本知道些怎么做，网上也随便找了找，没什么合意的，毕竟需求不同，也不能完全一样不是。学习之，改之╮(╯▽╰)╭
Directive
angular.module('XXX').directive('stars',stars);
functionstars(){
vardirective={
restrict:'AE',
template:'<ulclass="rating"ng-mouseleave="leave()">'+
'<ling-repeat="starinstars"ng-class="star"ng-click="click($index+1)"ng-mouseover="over($index+1)">'+
'<iclass="glyphiconglyphicon-starstars"></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");
varupdateStars=function(){
scope.stars=[];
for(vari=0;i<scope.max;i++){
scope.stars.push({
filled:i<scope.ratingValue
});
}
};
updateStars();
varupdateStarsHover=function(){
scope.stars=[];
for(vari=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();
}
});
}
};
returndirective;
/**@ngInject*/
functionstartsController($scope){
//varvm=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;
}
.ratingli{
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
<starsrating-value="ratingVal"hover-value="hoverVal"max="max"on-hover="onHover"on-leave="onLeave"></stars>
ratingVal:{{ratingVal}};<br/>
hoverVal:{{hoverVal}}
说几句， 星星那东西，可以直接输入法敲出来，也可以用unicode搞出来，字体文件什么的都行，你要硬用图片的话……把ngClass换成ngSrc也可以试试，代码改改也行，精灵图改改background-position也凑合过，╮(╯▽╰)╭想了一下，比较累，祝你成功。
如果是那种商城网站只是要看评价等级的话，复用代码也可以，加个readonly属性。
directive：
scope:{
readonly:'@'
}
functionstartsController($scope){
//varvm=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吧……
指令这玩意，深了很绕，我也弄不熟，每次写还得翻翻以前写的代码，毕竟渣渣。每次不要复用的代码，我都懒得用指令，毕竟菜鸟。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。