angular2--实现星星评分功能，可点击可传值

最新推荐文章于 2021-08-10 11:45:24 发布

Ariel_ckr

最新推荐文章于 2021-08-10 11:45:24 发布

阅读量569

点赞数 1

分类专栏： angular2+onsenui框架文章标签：星星评分

本文链接：https://blog.csdn.net/Ariel_201311/article/details/100185763

版权

本文介绍如何在Angular2中实现星星评分功能，初始显示3星高亮，支持用户点击改变评分状态。

摘要由CSDN通过智能技术生成

实现效果如下

在这里插入图片描述
一开始给星星赋值变量为3，所以初始化时，有3颗星星被点亮；后面进行点击操作的时候，就根据点击的位置星星就会变亮啦~~

html

<div class="stars">
	<img [src]="pic.flag == 0 ? pic.grayStar: pic.yellowStar" alt="" *ngFor="let pic of lists; let i = index" (click)="clickStars(i)">
	<p>{
  {score}}</p

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Ariel_ckr

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

商品评价星星组件参数当前星星亮星星暗星星（图片地址）商品评分评分描述是否开启评分跟描述星星大小星星最大数量是否可以点击星星间距

04-22

商品评价星星组件参数当前星星亮星星暗星星（图片地址）商品评分评分描述是否开启评分跟描述星星大小星星最大数量是否可以点击星星间距等参数，如需其他请自行修改。用法： import rate from '../../components/rate.vue'

angularJs实现星星等级评分

weixin_34218579的博客

09-24

242

　　星期六加班，教育后台也要有星级评分等级的需求，醉了……基本知道些怎么做，网上也随便找了找，没什么合意的，毕竟需求不同，也不能完全一样不是。学习之，改之╮(╯▽╰)╭ 　　Directive 1 angular.module('XXX').directive('stars', stars); 2 3 function stars() { 4 var...

1 条评论您还未登录，请先登录后发表或查看评论

AngularJS实现星星等级评分功能

10-21

主要为大家详细介绍了AngularJS实现星星等级评分功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

更改后angularjs自定义星级评分

weixin_34018202的博客

08-08

124

自定义控制器directive代码如下： app.directive('hgStarBox', function () { return { restrict:'ECAM', template: '<div class="hg-score"><div class="hg-star-des" ng-transclude&gt...

Angular 星级评分组件

weixin_30445169的博客

09-28

373

一、需求演变及描述： 1. 有一个“客户对公司的总体评价”的字段（evalutation）。字段为枚举类型，0-5，对应关系为：0-暂无评价，1-很差，2-差，3-一般，4-好，5-很好 2. 后来需要根据评分使用星星来表现，一共5颗星，分为实星和空星，例如，当3分时，三颗星星被点亮，即3颗实星2颗空星。二、开发前准备： 1. 用于描述星星的图标，也可以是图片，我这里使用 iconfon...

js 实现简单的星星值打分

weixin_39228870的博客

01-03

970

此实例只能实现简单的0-5整数值打分直接po代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title&g

angular4小星星评分功能代码

砂糖葫芦娃的博客

08-18

1805

好像好久没记录学到的新知识了，一开始呢没有活做，一直闲着，后来呢，有活了，但是很突然，导致没有时间写，哈哈哈。总在极与极之间转换，难免觉得生活枯燥工作压力大，可能这才是正常的工作状态吧，要慢慢调整自己。不知道有几个人能看到我的博客，但是如果有幸被人看到了，觉得也很赚到，毕竟送了碗鸡汤，哈哈哈。估计接下来我会写几篇博客来记录项目中遇到的一些小小的我第一次见到的功能，这个是评分的小星星功能。长这样 h

angular2-grid：用于angular2的基于dropdropresize网格的插件指令

01-31

Angular 2网格角2格是一个基于网格拖曳/删除/调整大小的插件指令。此仓库中的演示遵循建立要使用Angular 2 Grid系统，只需运行npm install angular2-grid ，然后在项目模块导入中包含NgGridModule （更多示例，...

Angular2-Toaster：Angular2-toaster是一个异步，无阻塞的Angular Toaster通知库

01-31

Angular2-烤面包机 angular2-toaster是一个异步的，非阻塞的，基于时间编译支持的Angular Toaster Notification库，主要基于。版本^ 11.0.0具有许多新功能，类型定义和重大更改。在升级之前，请查看以获得功能...

js点亮星星评分并获取参数的js代码

10-25

点亮星星评分后，点击按钮，立即获得分数参数值，方便不想使用ajax传参的朋友

angular2-hotkeys：Angular 2应用程序的键盘快捷键

02-01

angular2-热键 Angular 9和常春藤兼容。较旧的版本可能有效，但尚未经过官方测试。安装要安装此库，请运行： $ npm install angular2-hotkeys --save 例子首先，将HotkeyModule导入您的根AppModule import { ...

angular-tree-component：一个简单但功能强大的Angular树组件（> = 2）

01-31

角树成分新闻我们很高兴地宣布，从今天开始，正在接管此存储库。我们怀着坚定的信念继续这一旅程，社区不应错过这个组成部分，并且我们希望您一如既往地提供持续而重要的... @import '~@circlon/angular-tree-comp

js实现星星评价即获取返回值

kxj19980524的博客

03-08

644

效果鼠标悬停,自己就加星 https://download.csdn.net/download/kxj19980524/11005717下载地址js,css文件我上传的那个只有一行星星效果,用多行的话,只需要复制html的内容就可以了,然后把id一改在js里这样修改了id调方法就可以了只要把这块id一变就可以了往自己项目使用的时候记得把js,css等东西引用过来 ...

微信小程序，星星评分，如何修改数组的值，函数传参

m0_55546349的博客

08-10

771

微信小程序——如何修改数组的值 data: { // value:3, list:[{index:0,title:"短驳司机：", name:"张三丰", value:"",standard:""}, {index:1, title:"站点服务：",name:"北京西站", value:"",standard:""}, { index:2, title:"物流服务：", name:"", value:"",standard:""},] }, methods: {

Angular+ionic评分组件的引用

weixin_44794123的博客

07-28

381

一，封装组件 1，rating-star.component.html中 <div class="rating_container"> <ng-container *ngFor="let num of [1, 2, 3, 4, 5]"> <ion-icon name="star" *ngIf="num<=rating;else:Half" color="warning" (click)="changeNum(num)" [ngClass]="{'m

angular2分页组件

sanlingwu的博客

04-19

1882

创建一个分页包 pagination，然后在里面依次创建几个文件： page.component.html 分页组件的标签内容 page.conponent.ts 分页组件定义 pagination.ts 分页组件所需配置信息的对象 index.ts 导出分页组件page.component.html <nav aria-label="Page n...

ng-book2：Angular 2入门指南 - 最新版r41

在实际操作部分，“Writing Your First Angular 2 Web Application”带领读者创建一个简单的Reddit克隆项目，逐步学习如何使用TypeScript（Angular 2的首选编程语言），以及如何利用angular-cli工具进行项目初始化。...