Maison > interface Web > js tutoriel > le corps du texte

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

小云云
Libérer: 2017-12-23 09:58:50
original
1651 Les gens l'ont consulté

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>
Copier après la connexion

directives.js


angular.module(&#39;starter.directives&#39;, [])

.directive(&#39;starRating&#39;, function() {
 return {
  restrict: &#39;A&#39;,
  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
    });
   }
  }
 }
});
Copier après la connexion

services. js


.service("BusinessData", [function () {
  var businessData = [
  {
    id: 1,
    serviceId: 1,
    name: &#39;World Center Garage&#39;,
    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;
    }
  }
}])
Copier après la connexion

controller.js


.controller(&#39;ServiceCtrl&#39;, function($scope, ServicesData, BusinessData, $stateParams) {
 $scope.service = ServicesData.getSelectedService($stateParams.service);
 $scope.businessList = BusinessData.getSelectedBusiness($stateParams.service);
});
Copier après la connexion

Solution 1 :

controller.js


.controller(&#39;ServiceCtrl&#39;, function($scope, ServicesData, BusinessData, $stateParams) {
 $scope.service = ServicesData.getSelectedService($stateParams.service);
 $scope.businessList = BusinessData.getSelectedBusiness($stateParams.service);
 $scope.ratings = {
   current: 5,
   max: 10
   };
Copier après la connexion

Kazuya modifié service.html


<p star-rating rating-value="rating.current" max="rating.max"></p>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!