Question

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

用评级明星
使用ajax将所选星号的数量发送到后端以保存在数据库中

例如：

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

到目前为止，我尝试过：安装了离子评级插件＆amp;在我的索引中调用参考链接：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

您可以将https://github.com/fraserxu/ionic-rating用于Ionic 1应用，将https://github.com/andrucz/ionic2-rating用于Ionic 2应用。

Answer 3

实际上不需要在json中添加任何额外的包，我们可以自行实现简单的星级评定

<div *ngIf="rate==0">
    <ion-icon color="primary" name="star-outline" (click)="onRate(1)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(2)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(3)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(4)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(5)"></ion-icon>
  </div>
  <div *ngIf="rate==1">
    <ion-icon color="primary" name="star" (click)="onRate(1)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(2)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(3)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(4)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(5)"></ion-icon>
  </div>
  <div *ngIf="rate==2">
    <ion-icon color="primary" name="star" (click)="onRate(1)"></ion-icon>
    <ion-icon color="primary" name="star" (click)="onRate(2)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(3)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(4)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(5)"></ion-icon>
  </div>

  <div *ngIf="rate==3">
    <ion-icon color="primary" name="star" (click)="onRate(1)"></ion-icon>
    <ion-icon color="primary" name="star" (click)="onRate(2)"></ion-icon>
    <ion-icon color="primary" name="star" (click)="onRate(3)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(4)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(5)"></ion-icon>
  </div>
  <div *ngIf="rate==4">
    <ion-icon color="primary" name="star" (click)="onRate(1)"></ion-icon>
    <ion-icon color="primary" name="star" (click)="onRate(2)"></ion-icon>
    <ion-icon color="primary" name="star" (click)="onRate(3)"></ion-icon>
    <ion-icon color="primary" name="star" (click)="onRate(4)"></ion-icon>
    <ion-icon color="primary" name="star-outline" (click)="onRate(5)"></ion-icon>
  </div>
  <div *ngIf="rate==5">
    <ion-icon color="primary" name="star" (click)="onRate(1)"></ion-icon>
    <ion-icon color="primary" name="star" (click)="onRate(2)"></ion-icon>
    <ion-icon color="primary" name="star" (click)="onRate(3)"></ion-icon>
    <ion-icon color="primary" name="star" (click)="onRate(4)"></ion-icon>
    <ion-icon color="primary" name="star" (click)="onRate(5)"></ion-icon>
  </div>

.ts文件中

rate=0;
onRate(rate) {
    console.log(rate)
    this.rate = rate;
  }

Answer 4

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........
}

Answer 5

React 的 Ionic 5 星评级显示：

{/* filled star for given rating */}
{[...Array(review.rating).keys()].map(() => {
    return <IonIcon icon={star} color="warning" />;
})}

{/* empty star */}
{[...Array(5 - review.rating).keys()].map(() => {
    return <IonIcon icon={starOutline} color="warning" />;
})}

如何使用离子法实施评级星

5 个答案: