ANGULARJS Achieve star ratings

Saturday overtime, education backstage also to have star rating level demand, drunk ... Basic know how to do, the Internet also casually look for, nothing agreeable, after all, the demand is different, can not be exactly the same. Learn, change the ╮(╯▽╰)╭

　　Directive

1Angular.module (' XXX '). directive (' stars '), stars);2 3     functionstars () {4         vardirective = {5Restrict: ' AE ',6Template: ' <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> ' +Ten' </ul> ', One scope: { ARatingvalue: ' = ', -Hovervalue: ' = ', -Max: ' = ', theOnhover: ' = ', -Onleave: ' = ' -             }, - Controller:startscontroller, +  -Linkfunction(Scope, Elem, attrs) { +ELEM.CSS ("Display", "block"); AElem.css ("Text-align", "center"); at                 varUpdatestars =function() { -Scope.stars = []; -                      for(vari = 0; i < Scope.max; i++) { - Scope.stars.push ({ -Filled:i <Scope.ratingvalue -                         }); in                     } -                 }; to updatestars (); +  -                 varUpdatestarshover =function() { theScope.stars = []; *                      for(vari = 0; i < Scope.max; i++) { $ Scope.stars.push ({Panax NotoginsengFilled:i <Scope.hovervalue -                         }); the                     } +                 }; A updatestarshover (); the  +Scope. $watch (' Ratingvalue ',function(Oldval, newval) { -                     if(newval) { $ updatestars (); $                     } -                 }); -Scope. $watch (' Hovervalue ',function(Oldval, newval) { the                     if(newval) { - updatestarshover ();Wuyi                     } the                 }); -             } Wu  -  About         }; $  -         returndirective; -  -         /** @ngInject*/ A         functionStartscontroller ($scope) { +             //var vm = this; the$scope. Click =function(val) { -$scope. Ratingvalue =Val; $             }; the$scope. Over =function(val) { the$scope. Hovervalue =Val; the             }; the$scope. Leave =function() { - $scope. Onleave (); in             } the  the         } About}

　　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

        // star rating        $scope. max = 6;         = 6;         = 6;//I This demand is the default of six stars full (light, anyway also can not recruit the dragon.) because of one. In general, Ratingval and Hoverval both write 0.         function (val) {            = val;        };         function () {            = $scope. ratingval;        }         function (val) {            = val;        }

　　Html

<stars rating-value= "Ratingval" hover-value= "Hoverval" max= "Max" on-hover= "Onhover" on-leave= "OnLeave" ></ Stars>ratingval:{{ratingval}};<br/>hoverval:{{hoverval}}

Say a few words,

Star that thing, can direct input method to knock out, also can use Unicode to make out, font file What all line, you want to hard with picture words ... Change the Ngclass to Ngsrc also can try, code change also line, Sprite diagram change background-position also make do, ╮(╯▽╰)╭ think a bit, more tired, I wish you success.

　　

If it is the kind of mall site just to see the evaluation level, reuse code can also add a readonly attribute.

1 directive:2 scope: {3ReadOnly: ' @ '4     }5      functionStartscontroller ($scope) {6             //var vm = this;7$scope. Click =function(val) {8               if($scope. readonly) {9                   return;Ten                 } One$scope. Ratingvalue =Val; A             }; -$scope. Over =function(val) { -               if($scope. readonly) { the                   return; -                 } -$scope. Hovervalue =Val; -             }; +  -       } +  A Controller: at$scope. readonly =false; -  - HTML: -Readonly={{readonly}}.

Write this, suddenly realize that the future will definitely change the demand, add function (already used). I still add ReadOnly in silence ...

　　

Directive this thing, deep is very round, I also do not know, each write also had to turn over before write code, after all slag slag. Do not reuse the code every time, I do not bother to use instructions, after all, rookie.

or learn more!

　　

ANGULARJS Achieve star ratings