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>
分类:
HTML5
标签:
ionic 五星评价
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳,地球,月球 运作规律
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具