angularJs實現星星等級評分

　　星期六加班，教育後臺也要有星級評分等級的需求，醉了……基本知道些怎麼作，網上也隨便找了找，沒什麼合意的，畢竟需求不一樣，也不能徹底同樣不是。學習之，改之╮(╯▽╰)╭

　　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.ratingValue
28                         });
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.hoverValue
38                         });
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 = val;
65             };
66             $scope.over = function(val) {
67                 $scope.hoverValue = 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="ratingVal" hover-value="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 = val;
12             };
13             $scope.over = function(val) {
14               if ($scope.readonly) {
15                   return;
16                 }
17                 $scope.hoverValue = val;
18             };
19 
20       }
21 
22 controller:
23     $scope.readonly = false;
24 
25 html:
26     readonly={{readonly}}.

　　寫到這，忽然意識到從此必定會改需求，加功能(已然習慣)。我仍是默默地加上readonly吧……

　　

 

　　指令這玩意，深了很繞，我也弄不熟，每次寫還得翻翻之前寫的代碼，畢竟渣渣。每次不要複用的代碼，我都懶得用指令，畢竟菜鳥。

　　仍是多學習！