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>