angular4小星星评分功能代码
来源:互联网 发布:淘宝网西服 编辑:程序博客网 时间:2024/06/05 09:07
好像好久没记录学到的新知识了,一开始呢没有活做,一直闲着,后来呢,有活了,但是很突然,导致没有时间写,哈哈哈。总在极与极之间转换,难免觉得生活枯燥工作压力大,可能这才是正常的工作状态吧,要慢慢调整自己。不知道有几个人能看到我的博客,但是如果有幸被人看到了,觉得也很赚到,毕竟送了碗鸡汤,哈哈哈。
估计接下来我会写几篇博客来记录项目中遇到的一些小小的我第一次见到的功能,这个是评分的小星星功能。长这样
html:
<div class="form-item"> <span >评分</span> <label class="item item-input"> <p class="stars-wrapper"> <span class="stars" *ngFor="let i of [1, 2, 3, 4, 5]" [ngClass]="{active: stars > i - 1}" (click)="clickStars(i) </span> </p> </label></div>
less:
.stars-wrapper { margin: 0; position: absolute; right: 0.75rem; top: 0.35rem;}.stars { display: inline-block; background: url(灰色小星星地址) no-repeat; background-size: 1rem 1rem; width: 1rem; height: 1rem;}.active { background-image: url(黄色小星星地址);}
ts:
clickStars(i: number) { this.stars = i; };
其他就很简单啦,我想记录单只有一个知识点,ngClass是如何点了第三个只传了第三个的值,但是前三个的span都绑定了active的
是因为循环的12345是位数,他们分别对应的索引是01234,传得是位置,比较的是索引,如果点击第三位,i=3, {active: 3> 3 - 1}
小于3的都显示。
阅读全文
0 0
- angular4小星星评分功能代码
- 【代码笔记】iOS-评分系统(小星星)
- 电脑评分效果---点亮小星星
- Android自定义小星星评分控件
- Android 自定义ratingBar(评分小星星)的使用
- jQuery编写动态评分小星星的插件
- 评分功能
- 小星星
- 小星星
- Angular4中调用js代码
- Angular4中调用js代码
- Angular4中调用js代码
- 星级评分功能实现
- 设置评分功能
- 星星评分功能
- 常见功能--应用评分
- Angular4
- Angular4
- sublime插件推荐
- SSM 增、删(ajax)
- hdu 6143 Killer Names
- dp day2/3-区间dp
- c++ c# opencv dll 调用的方法
- angular4小星星评分功能代码
- 面向对象的第一个特征:封装II
- POJ
- Caffe中卷积的实现细节(涉及到BaseConvolutionLayer、ConvolutionLayer、im2col等)
- unique去重函数
- 根据数组中某个两个值作为键、并把数组中同时存在该两个字段值的数组值累加、组合成三维数组
- Out of Hay
- 河南省多校赛(4)GJJ的日常之再游戏
- 98. Validate Binary Search Tree