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 写的个性导航菜单
Dec 24 Javascript
jquery validation插件表单验证的一个例子
Mar 03 Javascript
javascript面向对象编程代码
Dec 19 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
浅析JavaScript动画
Jun 10 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 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中养成7个面向对象的好习惯
2010/01/28 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
Python中规范定义命名空间的一些建议
2016/06/04 Python
用Python设计一个经典小游戏
2017/05/15 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
Python流程控制常用工具详解
2020/02/24 Python
Python request操作步骤及代码实例
2020/04/13 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
python 读取串口数据的示例
2020/11/09 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
一套C#面试题
2013/10/09 面试题
前台文员个人求职信范文
2014/01/05 职场文书
产品销售计划书
2014/05/04 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
Python实现制作销售数据可视化看板详解
2021/11/27 Python
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis