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 相关文章推荐
由document.body和document.documentElement想到的
Apr 13 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
Apr 11 Javascript
再谈javascript原型继承
Nov 10 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
Mar 04 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 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 swfupload图片上传的实例代码
2013/09/30 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
python中单下划线_的常见用法总结
2018/07/10 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
乐高官方旗舰店:LEGO积木玩具
2019/04/06 全球购物
竞选班干部演讲稿
2014/04/24 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
北京故宫导游词
2015/01/31 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
Golang生成Excel文档的方法步骤
2021/06/09 Golang
MySQL 数据类型详情
2021/11/11 MySQL
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python
Python中requests库的用法详解
2022/06/05 Python