欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

AngularJS实现星星等级评分功能

程序员文章站 2022-05-23 20:04:50
星期六加班,教育后台也要有星级评分等级的需求,醉了……基本知道些怎么做,网上也随便找了找,没什么合意的,毕竟需求不同,也不能完全一样不是。学习之,改之╮(╯▽╰)╭...

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。