À propos de l'implémentation du système de notation par étoiles du rendu Angularjs à l'aide de la directive

Cet article présente principalement l'exemple du système de notation par étoiles de la directive using rendu par Angularjs. L'éditeur le trouve plutôt bon. Maintenant, je le partage avec vous et vous donne une référence. J'espère que cela pourra vous aider à mieux le maîtriser. Angularjs.

Cet article présente un exemple du système de notation par étoiles de la directive using rendue par Angularjs et le partage avec tout le monde. Les détails sont les suivants :
J'ai essayé de créer un système de notation par étoiles utilisé de manière statique. angulairejs/ion avec peu d'effet. Mais actuellement, rien n'est affiché à l'écran... Est-ce que je fais quelque chose de mal ?

service.html

 <ion-list>
  <ion-item ng-repeat="business in businessList track by $index" class="item-icon-right">
   <h2>{{business.name}}</h2> {{business.distance}} miles
   <br>
   <p star-rating rating-value="{{business.rating}}" max="rating.max"></p>
   <i class="icon ion-chevron-right icon-accessory"></i>
  </ion-item>
 </ion-list>

directives.js

angular.module('starter.directives', [])

.directive('starRating', function() {
 return {
  restrict: 'A',
  template: &#39;<ul class="rating">&#39; +
   &#39;<li ng-repeat="star in stars" ng-class="star">&#39; +
   &#39;\u2605&#39; +
   &#39;</li>&#39; +
   &#39;</ul>&#39;,
  scope: {
   ratingValue: &#39;=&#39;,
   max: &#39;=&#39;
  },
  link: function(scope, elem, attrs) {
   scope.stars = [];
   for (var i = 0; i < scope.max; i++) {
    scope.stars.push({
     filled: i < scope.rating
    });
   }
  }
 }
});

services. js

.service("BusinessData", [function () {
  var businessData = [
  {
    id: 1,
    serviceId: 1,
    name: 'World Center Garage',
    distance: 0.1,
    rating: 4
  }
];

  return {
    getAllBusinesses: function () {
      return businessData;
    },

    getSelectedBusiness: function(serviceId) {
      var businessList = [];
      serviceId = parseInt(serviceId);
      for(i=0;i<businessData.length;i++) {
        if(businessData[i].serviceId === serviceId) {
          businessList.push(businessData[i]);
        }
      }
      return businessList;
    }
  }
}])

controller.js

.controller('ServiceCtrl', function($scope, ServicesData, BusinessData, $stateParams) {
 $scope.service = ServicesData.getSelectedService($stateParams.service);
 $scope.businessList = BusinessData.getSelectedBusiness($stateParams.service);
});

Solution 1 :

controller.js

.controller('ServiceCtrl', function($scope, ServicesData, BusinessData, $stateParams) {
 $scope.service = ServicesData.getSelectedService($stateParams.service);
 $scope.businessList = BusinessData.getSelectedBusiness($stateParams.service);
 $scope.ratings = {
   current: 5,
   max: 10
   };

Kazuya modifié service.html

<p star-rating rating-value="rating.current" max="rating.max"></p>

Connexe recommandations :

Exemples détaillés de JS complétant la fonction de notation par étoiles

Plug-in de notation par étoiles basé sur jQuery

Utiliser CSS pour créer des notes par étoiles_Échange d'expériences

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!