AngularJS实现星星等级评分功能


Posted in Javascript onSeptember 24, 2016

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

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

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

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

Javascript 相关文章推荐
jquery tab标签页的制作
May 10 Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
Bootstrap carousel轮转图的使用实例详解
May 17 Javascript
微信公众号 客服接口的开发实例详解
Sep 28 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
js实现无缝轮播图特效
May 09 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 Javascript
完美的js div拖拽实例代码
Sep 24 #Javascript
javascript 解决浏览器不支持的问题
Sep 24 #Javascript
JavaScript生成验证码并实现验证功能
Sep 24 #Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 #Javascript
javascript 分号总结及详细介绍
Sep 24 #Javascript
Bootstrap对话框使用实例讲解
Sep 24 #Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 #Javascript
You might like
十天学会php之第五天
2006/10/09 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
PHP编写RESTful接口
2016/02/23 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
JavaScript XML操作 封装类
2009/07/01 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
python常用排序算法的实现代码
2019/11/08 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
标记环介质访问控制协议
2016/03/27 面试题
个人实用简单的自我评价
2013/10/19 职场文书
毕业自荐书
2013/12/09 职场文书
安全生产演讲稿
2014/05/09 职场文书
活动总结范文
2014/08/30 职场文书
毕业横幅标语
2014/10/08 职场文书
药店营业员岗位职责
2015/04/14 职场文书
蔬果开业典礼发言稿应该怎么写?
2019/09/03 职场文书
Python中requests做接口测试的方法
2021/05/30 Python