AngularJS实现星星等级评分功能

星期六加班，教育后台也要有星级评分等级的需求，醉了……基本知道些怎么做，网上也随便找了找，没什么合意的，毕竟需求不同，也不能完全一样不是。学习之，改之╮（╯▽╰）╭

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也凑合过，╮（╯▽╰）╭ 想了一下，比较累，祝你成功。

如果是那种商城网站只是要看评价等级的话，复用代码也可以，加个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吧……

指令这玩意，深了很绕，我也弄不熟，每次写还得翻翻以前写的代码，毕竟渣渣。每次不要复用的代码，我都懒得用指令，毕竟菜鸟。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。