星期六加班，教育后台也要有星级评分等级的需求，醉了……基本知道些怎么做，网上也随便找了找，没什么合意的，毕竟需求不同，也不能完全一样不是。学习之，改之╮(╯▽╰)╭
Directive
angular.module('XXX').directive('stars', stars); function stars() { var directive = { restrict: 'AE', template: '<ul ng-mouseleave="leave()">' + '<li ng-repeat="star in stars" ng-class="star" ng-click="click($index + 1)" ng-mouseover="over($index + 1)">' + '<i></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吧……
指令这玩意，深了很绕，我也弄不熟，每次写还得翻翻以前写的代码，毕竟渣渣。每次不要复用的代码，我都懒得用指令，毕竟菜鸟。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。
【AngularJS实现星星等级评分功能】相关文章：
★ 探索angularjs+requirejs全面实现按需加载的套路