本来想用bootstrap-star-rating的,就是上传插件那个组做的。但是还是css的问题
后来百度了个别的东西,第一页就能搜到,就不妨链接了。
* @version 2.5.2
* @since 2010.06.11
* @author Washington Botelho
* @documentation wbotelhos.com/raty
很老的一个东西,能用就好。
<div id="star{{ite.$id}}" ng-bind="getrating(this,ite)"></div>
<script src="@Url.Content("~/Content/Component/star-rating/jquery.raty.js")"></script>
这个ite是循环的数据而已,星星插件只要里面一个分数就行
一般来讲评分是1~5,半星是0.5,不过我们要求0~10,半星是1
于是:
$scope.getrating = function (o, obj) { $("#star" + obj.$id).raty({ path: '@Url.Content("~/Content/Component/star-rating/img/")',//这是星星图= =其中有选中/没选/半选 3张 click: function (score, evt) { obj.Score = score * 2;//这里×2了 }, half: true,//这是开启半分的 readOnly: $scope.sstate != 1, score: obj.Score / 2,//这里要除2- - size: 24, hints: [2, 4, 6, 8, 10]//这里也要改 }); }
然后要,我这边还有要求,鼠标放上去要显示123456789分= =
这个要改下源文件jquery.raty.js了。
在_roundStars 这个方法中加了一行
this.stars.eq(Math.ceil(score) - 1).attr('title', score * 2);
不然这个title(也就是鼠标放上去显示的文字)会按照初始化(hints: [2, 4, 6, 8, 10])只显示出246810
整段是这样的,但是有个问题 10分和0分好像不显示,不过无所谓了= =
--------------------------------------------------------- }, _roundStars: function (score) { var rest = (score - Math.floor(score)).toFixed(2); if (rest > this.opt.round.down) { var icon = 'starOn'; // Up: [x.76 .. x.99] if (this.opt.halfShow && rest < this.opt.round.up) { // Half: [x.26 .. x.75] icon = 'starHalf'; } else if (rest < this.opt.round.full) { // Down: [x.00 .. x.5] icon = 'starOff'; } this.stars.eq(Math.ceil(score) - 1).attr('src', this.opt.path + this.opt[icon]); } // Full down: [x.00 .. x.25] this.stars.eq(Math.ceil(score) - 1).attr('title', score * 2); }, _target: function (score, evt) { ---------------------------------------------------------