如何利用离子技术实现星级评定

Question

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

1. 用评等星显示问题
2. 使用ajax将选定星号发送到后端以保存在数据库中

例如：

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

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

它用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);
  }

Answer 2

Ionic 1应用程序可以使用https://github.com/fraserxu/ionic-rating，Ionic 2应用程序可以使用https://github.com/andrucz/ionic2-rating。

Answer 3

page.html

 <div>
   <ion-icon color="primary" *ngFor="let item of list;let i = index" [name]="condition <= i? 'star-outline' :'star' "
  (click)="review(i)">
   </ion-icon>
 </div>

page.ts

condition: number = 0;
list: any[] = new Array(5);

review(i) {
   this.condition = i + 1;
   // your code........
}