ionic2入门教程(七)来一个五星评分

系列教程看这里
Ionic2入门教程(一)安装和环境配置
Ionic2入门教程(二)进阶配置:Android打包
ionic2入门教程(三)高仿网易公开课(1)
ionic2入门教程(四)解读目录结构
ionic2入门教程(五)如何使用IonicPage
ionic2入门教程(六)地图服务(谷歌、高德、百度定位)

五星评分

0、参考资源

https://segmentfault.com/a/11...
http://www.w3school.com.cn/ta...
https://stackoverflow.com/que...

1、效果图

图片描述

2、代码

html

  <ion-card>
    <ion-card-title padding>请您对我们的服务评分:</ion-card-title>
    <div class="star-div" (click)="chooseStar($event)">
      <div *ngFor="let scoreMap of score.starMap; let indx = index">
        <ion-icon name="star" color="chrome3" *ngIf="score.star>=indx+1;" style="padding-right: .5em" [attr.data-index]="indx+1"></ion-icon>
        <ion-icon name="star-outline" color="chrome3" *ngIf="score.star<indx+1;" style="padding-right: .5em" [attr.data-index]="indx+1"></ion-icon>
      </div>
      <span>{{score.starMap[score.star-1]}}</span>
    </div>
  </ion-card>

ts

  score: any = {
    star: 0,
    starMap: [
      '不满意',
      '还行',
      '一般',
      '满意',
      '很满意',
    ]
  }
chooseStar(e){
    let star = parseInt(e.target.dataset.index);
    this.score.star = star;
    // console.log(e.target.dataset.index);
    // console.log(this.score.star);
    // console.log(star);
  }

css

  .star-div {
    width: 80%;
    height: 40px;
    padding-left: 20px;
    span{
        color:#e5574f;
        float: left;
        font-size:20px;
    }
    ion-icon {
      float: left;
      font-size: 28px;
    }
  }

知其所以然——前端
“If you’re good at something, never do it for free.”
840 声望
341 粉丝
0 条评论
推荐阅读
前端小知识-工作中常用git命令
实际工作中常用git命令一次完整的提交 {代码...} 分支管理 {代码...} 分支合并(git merge)你需要另一个分支的所有代码变动,那么就采用合并 {代码...} 合并某次提交你只需要部分代码变动(某几个提交),这时可以...

JiaXinYi阅读 1.3k

过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.6k评论 3

封面图
掌握 TypeScript:20 个提高代码质量的最佳实践
本文首发于微信公众号:大迁世界, 我的微信:qq449245884,我会第一时间和你分享前端行业趋势,学习途径等等。更多开源作品请看 GitHub [链接] ,包含一线大厂面试完整考点、资料以及我的系列文章。

前端小智9阅读 1.6k

不要用100vh做移动响应
本文首发于微信公众号:大迁世界, 我的微信:qq449245884,我会第一时间和你分享前端行业趋势,学习途径等等。更多开源作品请看 GitHub [链接] ,包含一线大厂面试完整考点、资料以及我的系列文章。

前端小智6阅读 418

为什么JSON.parse会损坏大数字,如何解决这个问题?
微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。本文 GitHub [链接] 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

前端小智8阅读 878

5个async/await最佳实践
微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。本文 GitHub [链接] 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

前端小智5阅读 781

掌握TypeScript:10个最佳实践提高代码质量
TypeScript 是一种强类型的 JavaScript 超集,提供了很多优秀的工具和语言特性,可以帮助开发者提高代码质量和开发效率。在本文中,我们将介绍 10 个 TypeScript 最佳实践,帮助初级和中级的 Web 前端开发工程师...

pingan87874阅读 1.4k

封面图
840 声望
341 粉丝
宣传栏