Angularjs to achieve star grade scoring function _angularjs

Saturday overtime, education backstage also need to have the star rating level of demand, drunk ... Basic know how to do, online also casually looked for, there is no agreement, after all, the demand is different, can not be exactly the same. Study, change the ╮(╯▽╰)╭

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 ($inde x + 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

    Star rating
    $scope. max = 6;
    $scope. ratingval = 6;
    $scope. Hoverval = 6;//I This demand is the default six stars full (light teng, anyway, can not recruit the dragon. Because there's one more.) In general, Ratingval and Hoverval all write 0 on it.
    $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}}

Say a few words, the star that thing, can direct input method to knock out, also can use Unicode to get out, font file anything all line, you want to use picture words ... Change the Ngclass into ngsrc can also try, code change also line, wizard map change Background-position also make do, ╮(╯▽╰)╭ think a bit, more tired, I wish you success.

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

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}}.

Write this, suddenly realized that in the future will certainly change the demand, add function (already accustomed). I still silently add readonly bar ...

Instructions this thing, deep a very winding, I also do not know, each write still have to turn over before the code, after all slag slag. Every time do not reuse the code, I am too lazy to use instructions, after all, rookie.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.