ionic 写一个五星评价(非指令)

Controller里的代码:

复制代码
 1 .controller('evaluateCtrl', function($scope, $state, $stateParams, $ionicPopup,$ionicHistory,Popup) {
 2 
 3     //定义一个数组 映射五颗星星的位置和图片
 4     $scope.starArray = [
 5       {"id" : 1,
 6         "src":"img/icons/starBack.png"
 7       },
 8       {"id" : 2,
 9         "src":"img/icons/starBack.png"},
10       { "id" : 3,
11         "src":"img/icons/starBack.png"},
12       { "id" : 4,
13         "src":"img/icons/starBack.png"},
14       { "id" : 5,
15         "src":"img/icons/starBack.png"
16       }
17     ];
18      //初始化评价星级为0
19     $scope.currentStar = 0;
20      //改变星星的背景图  点击的当前星星和做左边的星星换成亮图,右边的星星变成灰图
21     function changeStars(){
22       for(var i = 0;i < $scope.starArray.length; i++){
23         if($scope.currentStar >= $scope.starArray[i].id){
24           $scope.starArray[i].src = "img/icons/star.png";
25         }else{
26           $scope.starArray[i].src = "img/icons/starBack.png";
27         }
28       }
29     }
30 
31     //点击星星的操作
32     $scope.clickStar = function(item){
33       $scope.currentStar = item.id;
34       changeStars();
35     };
36     //点击评价按钮 判断用户是否已经点击星星 给与评价
37     $scope.clickPublish = function() {
38       if($scope.currentStar == 0){
39         //若没点击,弹出提示
40         Popup.loadMsg('请点击对应的星星给协作人评价!', 1500);
41       }else{
42         //TODO
43       }
44     };
45 
46   })
复制代码

html 里的代码

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

 

posted @   wjwdive  阅读(2024)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示