Controller里的代码:

 .controller('evaluateCtrl', function($scope, $state, $stateParams, $ionicPopup,$ionicHistory,Popup) {

     //定义一个数组 映射五颗星星的位置和图片
$scope.starArray = [
{"id" : 1,
"src":"img/icons/starBack.png"
},
{"id" : 2,
"src":"img/icons/starBack.png"},
{ "id" : 3,
"src":"img/icons/starBack.png"},
{ "id" : 4,
"src":"img/icons/starBack.png"},
{ "id" : 5,
"src":"img/icons/starBack.png"
}
];
//初始化评价星级为0
$scope.currentStar = 0;
//改变星星的背景图 点击的当前星星和做左边的星星换成亮图,右边的星星变成灰图
function changeStars(){
for(var i = 0;i < $scope.starArray.length; i++){
if($scope.currentStar >= $scope.starArray[i].id){
$scope.starArray[i].src = "img/icons/star.png";
}else{
$scope.starArray[i].src = "img/icons/starBack.png";
}
}
} //点击星星的操作
$scope.clickStar = function(item){
$scope.currentStar = item.id;
changeStars();
};
//点击评价按钮 判断用户是否已经点击星星 给与评价
$scope.clickPublish = function() {
if($scope.currentStar == 0){
//若没点击,弹出提示
Popup.loadMsg('请点击对应的星星给协作人评价!', 1500);
}else{
//TODO
}
}; })

html 里的代码

 <div class="center_div" style="height:60px;padding-left: 20px;padding-top: 10px;padding-right: 20px;">
<div style="float:left;white-space:nowrap" ng-repeat="item in starArray">
<img ng-click="clickStar(item)" src="{{item.src}}"/>
</div>
</div>

ionic 写一个五星评价(非指令)的更多相关文章

  1. 如何给Ionic写一个cordova插件

    写一个cordova插件 之前由javaWeb转html5开发,由于面临新技术,遂在适应的过程中极为挣扎,不过还好~,这个过程也极为短暂:现如今面临一些较为复杂的需求还会有一丝丝头痛,却没有一开始那么 ...

  2. 给Ionic写一个cordova(PhoneGap)插件

    给Ionic写一个cordova(PhoneGap)插件 之前由javaWeb转html5开发,由于面临新技术,遂在适应的过程中极为挣扎,不过还好~,这个过程也极为短暂:现如今面临一些较为复杂的需求还 ...

  3. 在上线项目中,用Vue写一个星级评价

    先看一下效果: html: <div class="big-star-box"> <img :src="imgNum>0 ? srcStar : ...

  4. 基于ionic框架封装一个图片轮播指令的几点

    在这里我想在项目中封装一个图片轮播的指令 (本项目使用的是ionic框架) 1)定义指令 define(['app'],function(myapp){ myapp.directive('myslid ...

  5. linux常用终端指令+如何用vim写一个c程序并运行

    在装好ubuntu之后今天学习了一些linux的一些基础知识: windows里面打开命令窗口是win+r,在linux系统里面,ctrl+alt+t打开终端,今天的一些指令都是围绕终端来说的 首先s ...

  6. 用vetr.x写一个HTTP接口适配器, 对接各种形式接口

    用vetr.x写一个HTTP接口适配器, 对接各种形式接口 项目地址:https://github.com/hjx601496320/transmit 业务说明 在日常开发工作中,我们经常会遇到要和各 ...

  7. 写一个简单的 Linux Shell (C++)

    这里可以找到代码 github.com/z0gSh1u/expshell 支持的特性 单条指令的执行 引号引起的参数(如 $ some_program "hello, world" ...

  8. Python:Scrapy(二) 实例分析与总结、写一个爬虫的一般步骤

    学习自:Scrapy爬虫框架教程(二)-- 爬取豆瓣电影TOP250 - 知乎 Python Scrapy 爬虫框架实例(一) - Blue·Sky - 博客园 1.声明Item 爬虫爬取的目标是从非 ...

  9. 基于 vite2 + Vue3 写一个在线帮助文档工具

    提起帮助文档,想必大家都会想到 VuePress等,我也体验了一下,但是感觉和我的思路不太一样,我希望的是那种可以直接在线编辑文档,然后无需编译就可以直接发布的方式,另外可以在线写(修改)代码并且运行 ...

随机推荐

  1. 通过百度echarts实现数据图表展示功能

    现在我们在工作中,在开发中都会或多或少的用到图表统计数据显示给用户.通过图表可以很直观的,直接的将数据呈现出来.这里我就介绍说一下利用百度开源的echarts图表技术实现的具体功能. 1.对于不太理解 ...

  2. 了解 hadoop

    <Hadoop基础教程>之初识Hadoop 博客分类: 读后感   Hadoop一直是我想学习的技术,正巧最近项目组要做电子商城,我就开始研究Hadoop,虽然最后鉴定Hadoop不适用我 ...

  3. Oracle 操作 - 配置

    http://blog.csdn.net/flyingbox/article/details/1823231 http://blog.csdn.net/libingquan008/article/de ...

  4. 从几个方向进行Web渗透测试

    渗透测试就是对系统安全性的测试,通过模拟恶意黑客的攻击方法,来评估系统安全的一种评估方法. 渗透测试可以包括各种形式的攻击,一般来说会有专门的公司提供这种服务,这里整理了几种常见的渗透测试方法,可以对 ...

  5. 【ACM】HDU1008 Elevator 新手题前后不同的代码版本

    [前言] 很久没有纯粹的写写小代码,偶然想起要回炉再来,就去HDU随便选了个最基础的题,也不记得曾经AC过:最后吃惊的发现,思路完全不一样了,代码风格啥的也有不小的变化.希望是成长了一点点吧.后面定期 ...

  6. jquery tab

    jquery tab <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  7. 最新IP地址数据库

    2016年12月1日 最新发行版 265051条数据 基于:国内基于省市区以及运营商 国外基于国家 版本:全球旗舰版  国内精华版 国外拓展版 英文版 掩码版 字段:大洲 国家 省份 城市 县区 运营 ...

  8. SqlServer 函数 大全

    sql server使用convert来取得datetime日期数据 sql server使用convert来取得datetime日期数据,以下实例包含各种日期格式的转换 语句及查询结果: Selec ...

  9. 【转】cloudera新增用户权限配置

    转自 http://lookqlp.iteye.com/blog/2189119  .   配置起来较复杂,需要在有测试环境之后再进行配置测试.  之后是有上HUE的计划的,所以这个也是一定要做的. ...

  10. mysql ODBC 在64位下提示找不到odbc驱动问题

    在64位机器上,如果你想要连接32位mysql ,一般会安装mysql connector/ODBC 64位,并在配置ODBC数据源测试中连接正常,但在程序连接,如ASP.asp.net.VB.Del ...