如何使用 ionic 实现星级评级

Question

我正在使用 Ionic 框架开发移动应用程序，试图在我的反馈问题中实现评级星级。我需要：

1. 显示带有星级的问题
2. 使用ajax将选定的星星数量发送到后端保存在数据库中

前任：

{question1: 3, question2: 4, question3: 2}

到目前为止，我尝试过：安装了离子评级插件并在我的索引中调用参考链接： https: //market.ionic.io/plugins/ionic ratings

它以 5 颗星显示每个问题。这是我的内容

<ion-content>
<div class="card"  ng-repeat='item in fquestions'>
  <div class="item item-text-wrap">
    <h2>Q: {{item.feedback_question}}</h2>
    <p style="font-size:30px;"><ionic-ratings ratingsobj='ratingsObject'></ionic-ratings></p>
  </div>
</div>
</ion-content>

Answer 1

我用它来制作一个评级星星（里面没有Ajax，我让你这部分）：在你的html中：

<ion-content ng-controller="AppCtrl">
          <div class="padding text-center">
        <h3>Rate the App</h3>
        <div>
          <a href="javascript:" ng-repeat="r in ratingArr" class="padding" style="text-decoration:none;">
            <i class="icon {{r.icon}}" ng-click="setRating(r.question,r.value)"></i>
          </a>
        </div>
      </div>
      </ion-content>

并进入您的控制器：

$scope.ratingArr = [{
    value: 1,
    icon: 'ion-ios-star-outline',
    question: 1
  }, {
    value: 2,
    icon: 'ion-ios-star-outline',
    question: 2
  }, {
    value: 3,
    icon: 'ion-ios-star-outline',
    question: 3
  }, {
    value: 4,
    icon: 'ion-ios-star-outline',
    question: 1
  }, {
    value: 5,
    icon: 'ion-ios-star-outline',
    question: 'question 5'
  }];

  $scope.setRating = function(question,val) {
    var rtgs = $scope.ratingArr;
    for (var i = 0; i < rtgs.length; i++) {
      if (i < val) {
        rtgs[i].icon = 'ion-ios-star';
      } else {
        rtgs[i].icon = 'ion-ios-star-outline';
      }
    };
    alert(question);
  }