angularJs实现星星等级评分
星期六加班，教育后台也要有星级评分等级的需求，醉了……基本知道些怎么做，网上也随便找了找，没什么合意的，毕竟需求不同，也不能完全一样不是。学习之，改之(╯▽╰)╭
Directive
1angular.module(''XXX'').directive(''stars'',stars);
2
3functionstars(){
4vardirective={
5restrict:''AE'',
6template:''''+
7''''+
8''''+
9''''+
10'''',
11scope:{
12ratingValue:''='',
13hoverValue:''='',
14max:''='',
15onHover:''='',
16onLeave:''=''
17},
18controller:startsController,
19
20link:function(scope,elem,attrs){
21elem.css("display","block");
22elem.css("text-align","center");
23varupdateStars=function(){
24scope.stars=[];
25for(vari=0;i
26scope.stars.push({
27filled:i
28});
29}
30};
31updateStars();
32
33varupdateStarsHover=function(){
34scope.stars=[];
35for(vari=0;i
36scope.stars.push({
37filled:i
38});
39}
40};
41updateStarsHover();
42
43scope.$watch(''ratingValue'',function(oldVal,newVal){
44if(newVal){
45updateStars();
46}
47});
48scope.$watch(''hoverValue'',function(oldVal,newVal){
49if(newVal){
50updateStarsHover();
51}
52});
53}
54
55
56};
57
58returndirective;
59
60/@ngInject/
61functionstartsController($scope){
62//varvm=this;
63$scope.click=function(val){
64$scope.ratingValue=val;
65};
66$scope.over=function(val){
67$scope.hoverValue=val;
68};
69$scope.leave=function(www.hunanwang.net){
70$scope.onLeave();
71}
72
73}
74}
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28 .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(www.visa158.com){
$scope.hoverVal=$scope.ratingVal;
}
$scope.onChange=function(val){
$scope.ratingVal=val;
}
HTML
ratingVal:{{ratingVal}};
hoverVal:{{hoverVal}} 说几句，
星星那东西，可以直接输入法敲出来，也可以用unicode搞出来，字体文件什么的都行，你要硬用图片的话……把ngClass换成ngSrc也可以试试，代码改改也行，精灵图改改background-position也凑合过，(╯▽╰)╭想了一下，比较累，祝你成功。
如果是那种商城网站只是要看评价等级的话，复用代码也可以，加个readonly属性。
1directive：
2scope:{
3readonly:''@''
4}
5functionstartsController($scope){
6//varvm=this;
7$scope.click=function(val){
8if($scope.readonly){
9return;
10}
11$scope.ratingValue=val;
12};
13$scope.over=function(val){
14if($scope.readonly){
15return;
16}
17$scope.hoverValue=val;
18};
19
20}
21
22controller:
23$scope.readonly=false;
24
25html:
26readonly={{readonly}}.
写到这，突然意识到今后一定会改需求，加功能(已然习惯)。我还是默默地加上readonly吧……
?
指令这玩意，深了很绕，我也弄不熟，每次写还得翻翻以前写的代码，毕竟渣渣。每次不要复用的代码，我都懒得用指令，毕竟菜鸟。
还是多学习！
|
|
