AngularJS实现星星等级评分功能  更新时间:2016年09月24日 15:20:51   作者:大禹不治水   这篇文章主要为大家详细介绍了AngularJS实现星星等级评分功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 星期六加班,教育后台也要有星级评分等级的需求,醉了……基本知道些怎么做,网上也随便找了找,没什么合意的,毕竟需求不同,也不能完全一样不是。学习之,改之╮(╯▽╰)╭ Directive  angular.module(‘XXX’).directive(‘stars’, stars); function stars() { var directive = { restrict: ‘AE’, template: ” + ” + ” + ” + ”, 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 ratingVal:{{ratingVal}}; 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吧…… 指令这玩意,深了很绕,我也弄不熟,每次写还得翻翻以前写的代码,毕竟渣渣。每次不要复用的代码,我都懒得用指令,毕竟菜鸟。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。 您可能感兴趣的文章: JS实现星星评分功能实例代码(两种方法) js点亮星星评分并获取参数的js代码 js星星评分效果 js实现星星打分效果的方法 js实现的星星评分功能函数 javascript+css好多网站用的选星星实现打分功能的函数 JS实现评价的星星功能 js实现飞入星星特效代码 javascript实现随机显示星星特效 js实现星星闪特效 angularjs 评分 相关文章 ng-alain的sf如何自定义部件的流程 这篇文章主要介绍了ng-alain的sf如何自定义部件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 2020-06-06 AngularJS中的模块详解 这篇文章主要介绍了AngularJS中的模块详解,本文给出了一个模块实例,需要的朋友可以参考下 2015-01-01 教你用AngularJS框架一行JS代码实现控件验证效果 简单来说Angular.js是google开发者设计和开发的一套前端开发框架,帮助你简化前端开发的负担。到底能简化到什么程度呢,今天我们来看下,一行代码实现控件验证效果,有木有吓尿? 2014-06-06 Angular 作用域scope的具体使用 本篇文章主要介绍了Angular 作用域的具体使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-12-12 Angularjs中ng-repeat的简单实例 这篇文章主要介绍了Angularjs中ng-repeat的简单实例的相关资料,这里提供两个实例方法帮助大家彻底掌握这部分内容,需要的朋友可以参考下 2017-08-08 AngularJS获取json数据的方法详解 这篇文章主要介绍了AngularJS获取json数据的方法,结合实例形式详细分析了AngularJS获取json数据的详细步骤、操作技巧与相关注意事项,需要的朋友可以参考下 2017-05-05 从源码看angular/material2 中 dialog模块的实现方法 这篇文章主要介绍了 从源码看angular/material2 中 dialog模块的实现方法,需要的朋友可以参考下 2017-10-10 AngularJS实现tab选项卡的方法详解 这篇文章主要介绍了AngularJS实现tab选项卡的方法,结合实例形式较为详细的分析了AngularJS实现tab选项卡的原理、实现技巧与相关注意事项,需要的朋友可以参考下 2017-07-07 AngularJS中run方法的巧妙运用 前端技术的发展是如此之快,各种优秀技术、优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢。下面这篇文章主要给大家介绍了AngularJS中run方法的巧妙运用,需要的朋友可以参考借鉴,下面来一起看看吧。 2017-01-01 关于angular引入ng-zorro的问题浅析 这篇文章主要给大家介绍了关于angular引入ng-zorro的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2020-09-09 最新评论

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

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

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

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

您可能感兴趣的文章:

  • JS实现星星评分功能实例代码(两种方法)
  • js点亮星星评分并获取参数的js代码
  • js星星评分效果
  • js实现星星打分效果的方法
  • js实现的星星评分功能函数
  • javascript+css好多网站用的选星星实现打分功能的函数
  • JS实现评价的星星功能
  • js实现飞入星星特效代码
  • javascript实现随机显示星星特效
  • js实现星星闪特效
张贴在3