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 相关文章推荐
用JavaScript实现单继承和多继承的简单方法
Mar 29 Javascript
Prototype ObjectRange对象学习
Jul 19 Javascript
javascript JSON操作入门实例
Apr 16 Javascript
JavaScript动态添加事件之事件委托
Jul 12 Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
完美的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删除目录及目录下所有文件的方法详解
2013/06/06 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
javascript简易画板开发
2020/04/12 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
python实现巡检系统(solaris)示例
2014/04/02 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
详解Python绘图Turtle库
2019/10/12 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
Python新手学习装饰器
2020/06/04 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
个人收入证明范本
2014/01/12 职场文书
教师师德反思材料
2014/02/15 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
财务工作失职检讨书
2014/11/21 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
MySQL去除密码登录告警的方法
2022/04/20 MySQL