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吧……

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

　　还是多学习！

巴特西

angularJs实现星星等级评分

最新文章

热门文章