zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    [习题]输入自己的生日(年/月/日)#2 -- 日历(Calendar)控件的时光跳跃,一次跳回五年、十年前?--TodaysDate属性、VisibleDate属性
    Interesting effects
    kendoGrid methods方法
    kendoListBox 选择控件
    kendo format
    kendoGrid Event事件
    kendoGrid的一些基础配置
    kendoGrid edit功能
    kendoDatePicker日期选择控件
    Json与DataSet转化
  • 原文地址:https://www.cnblogs.com/wjw-blog/p/5527098.html
Copyright © 2011-2022 走看看