首页 > 代码库 > angularJs实现星星等级评分

angularJs实现星星等级评分

2024-08-14 14:16:33   214人阅读

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

　　Directive

 1 angular.module(‘XXX‘).directive(‘stars‘, stars); 2  3     function stars() { 4         var directive = { 5             restrict: ‘AE‘, 6             template: ‘<ul class="rating" ng-mouseleave="leave()">‘ + 7                 ‘<li ng-repeat="star in stars" ng-class="star" ng-click="click($index + 1)" ng-mouseover="over($index + 1)">‘ + 8                 ‘<i class="glyphicon glyphicon-star stars"></i>‘ + 9                 ‘</li>‘ +10                 ‘</ul>‘,11             scope: {12                 ratingValue: ‘=‘,13                 hoverValue: ‘=‘,14                 max: ‘=‘,15                 onHover: ‘=‘,16                 onLeave: ‘=‘17             },18             controller: startsController,19 20             link: function(scope, elem, attrs) {21                 elem.css("display", "block");22                 elem.css("text-align", "center");23                 var updateStars = function() {24                     scope.stars = [];25                     for (var i = 0; i < scope.max; i++) {26                         scope.stars.push({27                             filled: i < scope.ratingValue28                         });29                     }30                 };31                 updateStars();32 33                 var updateStarsHover = function() {34                     scope.stars = [];35                     for (var i = 0; i < scope.max; i++) {36                         scope.stars.push({37                             filled: i < scope.hoverValue38                         });39                     }40                 };41                 updateStarsHover();42 43                 scope.$watch(‘ratingValue‘, function(oldVal, newVal) {44                     if (newVal) {45                         updateStars();46                     }47                 });48                 scope.$watch(‘hoverValue‘, function(oldVal, newVal) {49                     if (newVal) {50                         updateStarsHover();51                     }52                 });53             }54 55 56         };57 58         return directive;59 60         /** @ngInject */61         function startsController($scope) {62             // var vm = this;63             $scope.click = function(val) {64                 $scope.ratingValue =http://www.mamicode.com/ val;65             };66             $scope.over = function(val) {67                 $scope.hoverValue =http://www.mamicode.com/ val;68             };69             $scope.leave = function() {70                 $scope.onLeave();71             }72 73         }74     }

　　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="http://www.mamicode.com/ratingVal" hover-value="http://www.mamicode.com/hoverVal" max="max" on-hover="onHover" on-leave="onLeave"></stars>ratingVal:{{ratingVal}};<br/>hoverVal:{{hoverVal}}

　　说几句，

　　星星那东西，可以直接输入法敲出来，也可以用unicode搞出来，字体文件什么的都行，你要硬用图片的话……把ngClass换成ngSrc也可以试试，代码改改也行，精灵图改改background-position也凑合过，╮(╯▽╰)╭ 想了一下，比较累，祝你成功。

　　技术分享

　　如果是那种商城网站只是要看评价等级的话，复用代码也可以，加个readonly属性。

 1 directive： 2     scope: { 3         readonly: ‘@‘ 4     } 5      function startsController($scope) { 6             // var vm = this; 7             $scope.click = function(val) { 8               if ($scope.readonly) { 9                   return;10                 }11                 $scope.ratingValue =http://www.mamicode.com/ val;12             };13             $scope.over = function(val) {14               if ($scope.readonly) {15                   return;16                 }17                 $scope.hoverValue =http://www.mamicode.com/ val;18             };19 20       }21 22 controller:23     $scope.readonly = false;24 25 html:26     readonly={{readonly}}.

　　写到这，突然意识到今后一定会改需求，加功能(已然习惯)。我还是默默地加上readonly吧……

　　技术分享

 

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

　　还是多学习！

 

 

　　

 

angularJs实现星星等级评分


联系
我们