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吧……
指令这玩意,深了很绕,我也弄不熟,每次写还得翻翻以前写的代码,毕竟渣渣。每次不要复用的代码,我都懒得用指令,毕竟菜鸟。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。